<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html class="js" dir="ltr" xmlns="http://www.w3.org/1999/xhtml" lang="ru"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="prev" href="http://javascript.ru/blog/Andrej-Paranichev/Vvedenie-sobytiya">

<link rel="next" href="http://javascript.ru/blog/Andrej-Paranichev/Osnovy-programmnoj-animacii-JavaScript">

<link rel="prev" href="http://javascript.ru/blog/Andrej-Paranichev/Vvedenie-sobytiya">

<link rel="next" href="http://javascript.ru/blog/Andrej-Paranichev/Osnovy-programmnoj-animacii-JavaScript">

<style type="text/css" media="all">@import "/files/css/3d07f1e784f2decd7c59ecc8308039b5.css";</style>
<script type="text/javascript" src="Izmereniya-okna-dokumenta-elementov_files/pack.js"></script>
<script type="text/javascript" src="Izmereniya-okna-dokumenta-elementov_files/ajax_vote_up_down.js"></script>
<script type="text/javascript" src="Izmereniya-okna-dokumenta-elementov_files/syntaxhighlighter.js"></script>
<script type="text/javascript" src="Izmereniya-okna-dokumenta-elementov_files/c3dcb5ea943ce52204c8588fb64dcd70.js"></script>
<script type="text/javascript" src="Izmereniya-okna-dokumenta-elementov_files/default_buttons_functions.js"></script>
<script type="text/javascript" src="Izmereniya-okna-dokumenta-elementov_files/jquery.js"></script>
<script type="text/javascript" src="Izmereniya-okna-dokumenta-elementov_files/forms.js"></script>
<script type="text/javascript" src="Izmereniya-okna-dokumenta-elementov_files/effects.js"></script>
<script type="text/javascript" src="Izmereniya-okna-dokumenta-elementov_files/effects_002.js"></script>
<script type="text/javascript" src="Izmereniya-okna-dokumenta-elementov_files/mistype.js"></script>
<script type="text/javascript">Drupal.extend({ settings: { "base_path": "/", "uc_ajax_cart": { "url": "/cart/ajax/update", "text": "Записаться...", "effects": false, "emptyHide": 1, "disable": 1, "ddSupport": false, "itemCount": 0, "bclass": "disabled" }, "baseurl": "http://javascript.ru/" } });</script>
<script type="text/javascript">
  SyntaxHighlighter.config.clipboardSwf = '/modules/syntaxhighlighter/sh/scripts/clipboard.swf'
  $(function() { SyntaxHighlighter.highlight() })
  </script>
<script type="text/javascript">var nid=981</script>
<script type="text/javascript">var enter_from=''</script>


	
<meta name="keywords" content="">
<meta name="description" content="">
	


<link rel="stylesheet" type="text/css" href="Izmereniya-okna-dokumenta-elementov_files/style-81884d78-00003.css" id="vbulletin_css">



<link rel="alternate" type="application/rss+xml" title="Статьи на javascript.ru" href="http://javascript.ru/article/feed">
<link rel="alternate" type="application/rss+xml" title="Все материалы с javascript.ru" href="http://javascript.ru/all/feed">






<!--
<script type="text/javascript" src="/modules/syntaxhighlighter/sh/scripts/shCore.js"></script>
<script type="text/javascript" src="/modules/syntaxhighlighter/sh/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="/modules/syntaxhighlighter/sh/scripts/shBrushJava.js"></script>
<script type="text/javascript" src="/modules/syntaxhighlighter/sh/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="/modules/syntaxhighlighter/sh/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="/modules/syntaxhighlighter/sh/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="/modules/syntaxhighlighter/sh/scripts/shBrushPython.js"></script>
<script type="text/javascript" src="/modules/syntaxhighlighter/sh/scripts/shBrushXml.js"></script>
<script type="text/javascript" src="/modules/syntaxhighlighter/sh/scripts/shBrushRuby.js"></script>
<script type="text/javascript" src="/modules/syntaxhighlighter/sh/scripts/shBrushErlang.js"></script>
<script type="text/javascript" src="/modules/syntaxhighlighter/sh/scripts/shBrushAS3.js"></script>
-->

<script type="text/javascript" src="Izmereniya-okna-dokumenta-elementov_files/syntaxhighlighter_002.js"></script>
<script type="text/javascript">
  SyntaxHighlighter.config.clipboardSwf = '/modules/syntaxhighlighter/sh/scripts/clipboard.swf'
  $(function() { SyntaxHighlighter.highlight() })
  </script>

<style type="text/css" media="all">@import "/modules/syntaxhighlighter/sh/styles/shCore.css";</style>
<style type="text/css" media="all">@import "/modules/syntaxhighlighter/sh/styles/shThemeDefault.css";</style>
<style type="text/css" media="all">@import "/themes/defaultangy/jquery.alerts.css";</style>

<script type="text/javascript"><!-- // hide from W3C validator

var SESSIONURL = "";
var IMGDIR_MISC = "/forum/images/ca_serenity/misc";
var vb_disable_ajax = parseInt("0", 10);
// --></script>


<script>
window._gaq =  []
_gaq.push(['_setAccount', 'UA-2056213-10']);
_gaq.push(["_addOrganic", "go.mail.ru","q"])
_gaq.push(["_addOrganic", "nova.rambler.ru","query"])
_gaq.push(["_addOrganic", "nigma.ru", "s"])
_gaq.push(["_addOrganic", "blogs.yandex.ru", "text", true])
_gaq.push(["_addOrganic", "webalta.ru", "q"])
_gaq.push(["_addOrganic", "aport.ru", "r"])
_gaq.push(["_addOrganic", "akavita.by", "z"])
_gaq.push(["_addOrganic", "meta.ua", "q"])
_gaq.push(["_addOrganic", "bigmir.net", "q"])
_gaq.push(["_addOrganic", "tut.by", "query"])
_gaq.push(["_addOrganic", "all.by", "query"])
_gaq.push(["_addOrganic", "i.ua", "q"])
_gaq.push(["_addOrganic", "online.ua", "q"])
_gaq.push(["_addOrganic", "a.ua", "s"])
_gaq.push(["_addOrganic", "ukr.net", "search_query"])
_gaq.push(["_addOrganic", "search.com.ua", "q"])
_gaq.push(["_addOrganic", "search.ua", "query"])
_gaq.push(["_addOrganic", "poisk.ru", "text"])
_gaq.push(["_addOrganic", "km.ru", "sq"])
_gaq.push(["_addOrganic", "liveinternet.ru", "ask"])
_gaq.push(["_addOrganic", "quintura.ru", "request"])
_gaq.push(["_addOrganic", "search.qip.ru","query"])
_gaq.push(["_addOrganic", "gde.ru","keywords"])
_gaq.push(["_addOrganic", "search.ukr.net","search_query"])
_gaq.push(["_addOrganic", "gogo.ru","q"])
_gaq.push(['_trackPageview']);
_gaq.push(['_trackPageLoadTime']);
</script>

<script type="text/javascript">
var ga = document.createElement('script')
ga.type = 'text/javascript'
ga.src = 'http://www.google-analytics.com/ga.js'
ga.async = true
document.getElementsByTagName('head')[0].appendChild(ga)
</script><script async="" src="Izmereniya-okna-dokumenta-elementov_files/ga.js" type="text/javascript"></script>

<title>Измерения окна, документа и элементов</title>
</head>
<body>
<div id="wrapper">

<a name="top"></a>
<table id="maintable" width="960" align="center" cellpadding="0" cellspacing="0">
<tbody><tr>
	<td id="maintable-first">


<style>
div#mk-announce {
height: 40px;	
line-height: 30px;				
padding-left: 0px;
position: relative;
text-align: center;
border-bottom: 1px solid black;
}
div#mk-announce table td {
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
padding: 3px 5px;
}
div#mk-announce table td a, div#mk-announce table td span {
color: white;
}
</style>
<div id="mk-announce" style="display:none">

<table style="margin: auto;" align="center" cellspacing="4"><tbody><tr>
<td colspan="3" style="padding-bottom: 0pt; font-size: 16px; padding-top: 0pt;"><a href="http://javascript.ru/mk" style="color: red;">Мастер-классы по Javascript, AJAX/COMET, jQuery</a></td>


<td><span style="color:black">22-23 октября, Москва</span></td>

<td style="background-color: rgb(0, 170, 255);"><a href="http://javascript.ru/mk" style="color: white;">Узнать больше...</a></td>

</tr></tbody></table>
</div>


<!-- header table --><table class="header-table" width="100%" border="0" cellpadding="0" cellspacing="0">
	<tbody><tr>
		<td align="left"><a href="http://javascript.ru/"><img title="Javascript.RU" src="Izmereniya-okna-dokumenta-elementov_files/logo.gif" alt="Javascript.RU" border="0"></a></td>
		<td class="header-table-login" valign="bottom" width="100%" align="right" nowrap="nowrap">

		
		<!-- login form -->
		<form action="http://javascript.ru/forum/login.php?do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, 0)" class="register-form">
		<script type="text/javascript" src="Izmereniya-okna-dokumenta-elementov_files/vbulletin_md5.js"></script>
		<table border="0" cellpadding="0" cellspacing="3">
		<tbody><tr>
			<td class="smallfont"><label for="navbar_username">Имя</label></td>
			<td><input class="bginput" style="font-size: 11px;" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="Имя" onfocus="if (this.value == 'Имя') this.value = '';" type="text"></td>
			<td class="smallfont" colspan="2" style="text-align: left;" nowrap="nowrap"><label for="cb_cookieuser_navbar"><input name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar" accesskey="c" checked="checked" type="checkbox">Запомнить?</label></td>
                        
		</tr>
		<tr>
			<td class="smallfont"><label for="navbar_password">Пароль</label></td>
			<td><input class="bginput" style="font-size: 11px;" name="vb_login_password" id="navbar_password" size="10" tabindex="102" type="password"></td>
			<td style="text-align: left;"><input class="button" value="Вход" tabindex="104" title="Введите Ваше имя пользователя и пароль, чтобы войти, или нажмите кнопку 'Регистрация', чтобы зарегистрироваться." accesskey="s" type="submit">
</td>
<td style="text-align: left;">
		
<a href="http://javascript.ru/forum/register.php" rel="nofollow" class="register-link">Регистрация</a>
		
</td>
		</tr>
		</tbody></table>
		<input name="s" value="" type="hidden">
		<input name="do" value="login" type="hidden">		
		<input name="vb_login_md5password" type="hidden">
		<input name="vb_login_md5password_utf" type="hidden">
		</form>
		<!-- / login form -->
			

		</td>
	</tr>
	</tbody></table><!-- / header table --></td>
</tr>
<tr>
	<td class="maintable-content"><!-- content table --><table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
	<td class="content-row">

<!-- nav buttons bar -->
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
	<td class="navbar-row" align="center"><table class="navbar-row-table" width="100%" align="center" cellspacing="0">
	<tbody><tr class="vbmenu_dark" align="center">


<td class="vbmenu_control"><h1><a href="http://javascript.ru/forum/">Форум</a></h1>
</td>

<td class="vbmenu_control"><!--noindex--><a rel="nofollow" href="http://learn.javascript.ru/">Учебник</a><!--/noindex-->
</td>

<td class="vbmenu_control"><h1><a href="http://javascript.ru/book">Книги</a></h1>
</td>


<td class="vbmenu_control"><a href="http://javascript.ru/blog">Блоги</a>
</td>


<td class="vbmenu_control"><a href="http://javascript.ru/ecma">Стандарт языка</a>
</td>

<td class="vbmenu_control"><a href="http://javascript.ru/mk">Мастер-классы по JavaScript</a>
</td>


<td class="vbmenu_control"><h1><a href="http://javascript.ru/manual">
Справочник</a></h1>
</td>


		
		<td width="100%">&nbsp;</td>
		


</tr>
</tbody></table>
<table class="navbar-row-table" width="100%" align="center" cellspacing="0">
<tbody><tr class="vbmenu_dark" align="center">


<td class="vbmenu_control"><a href="http://javascript.ru/doctree">Статьи</a>
</td>

<td class="vbmenu_control"><a href="http://javascript.ru/test">Тест знаний</a>
</td>


<td class="vbmenu_control"><a href="http://javascript.ru/php">Аналоги функций PHP</a>
</td>


<td class="vbmenu_control"><!--noindex--><a rel="nofollow" href="http://learn.javascript.ru/play">Песочница</a><!--/noindex-->
</td>



<td class="vbmenu_control"><!--noindex--><a rel="nofollow" href="http://jstalks.org/">JS.Talks</a><!--/noindex-->
</td>


<td class="vbmenu_control"><h1><a href="http://javascript.ru/courses"><span>Курсы javascript</span></a>
</h1></td>

<!--
<td class="vbmenu_control"><h1><a href="http://javascript.ru/ajax">AJAX</a></h1>
</td>
-->

<td width="100%">&nbsp;</td>


		
	</tr>
	</tbody></table></td>
</tr>
</tbody></table>
<!-- content table -->
<!-- open content container -->
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
	<td class="content-row" valign="top">




<!--noindex-->
<!-- NAVBAR POPUP MENUS -->
	
	
	<!-- header quick search form -->
	<div class="vbmenu_popup" id="navbar_search_menu" style="display:none">
		<table border="0" cellpadding="4" cellspacing="1">
		<tbody><tr class="thead-row">
			<td class="thead">Поиск по форуму</td>
		</tr>
		<tr>
			<td class="vbmenu_option" title="nohilite">
				<form action="http://javascript.ru/forum/search.php?do=process" method="post">
					<input name="do" value="process" type="hidden">
					<input name="quicksearch" value="1" type="hidden">
					<input name="childforums" value="1" type="hidden">
					<input name="exactname" value="1" type="hidden">
					<input name="s" value="" type="hidden">
					<div><input class="bginput" name="query" size="25" tabindex="1001" type="text"><input class="button" value="Вперёд" tabindex="1004" type="submit"></div>
					<div style="margin-top:4px">
						<label for="rb_nb_sp0"><input name="showposts" value="0" id="rb_nb_sp0" tabindex="1002" checked="checked" type="radio">Отображать темы</label>
						&nbsp;
						<label for="rb_nb_sp1"><input name="showposts" value="1" id="rb_nb_sp1" tabindex="1003" type="radio">Отображать сообщения</label>
					</div>					
				</form>
			</td>
		</tr>
		<tr>
			<td class="vbmenu_option"><a href="http://javascript.ru/forum/search.php" accesskey="4" rel="nofollow">Расширенный поиск</a></td>
		</tr>
		
		</tbody></table>
	</div>
	<!-- / header quick search form -->
	

	
<!-- / NAVBAR POPUP MENUS -->

<!-- PAGENAV POPUP -->

	<div class="vbmenu_popup" id="pagenav_menu" style="display:none">
		<table border="0" cellpadding="4" cellspacing="1">
		<tbody><tr class="thead-row">
			<td class="thead" nowrap="nowrap">К странице...</td>
		</tr>
		<tr>
			<td class="vbmenu_option" title="nohilite">
			<form action="index.php" method="get" onsubmit="return this.gotopage()" id="pagenav_form">
				<input class="bginput" id="pagenav_itxt" style="font-size: 11px;" size="4" type="text">
				<input class="button" id="pagenav_ibtn" value="Вперёд" type="button">
			</form>
			</td>
		</tr>
		</tbody></table>
	</div>

<!-- / PAGENAV POPUP -->
<!--/noindex-->





<!-- breadcrumb -->
<div id="navbar-row">

	<div class="navbar navbar-top"><a href="http://javascript.ru/" accesskey="1">Главная</a> 



	<span class="navbar">» <a href="http://javascript.ru/blog">Javascript-Блоги</a></span>


	<span class="navbar">» <a href="http://javascript.ru/blog/Andrej-Paranichev">Андрей Параничев</a></span>

 »
<strong>
	Измерения окна, документа и элементов

</strong>

</div>

</div>
<br class="spacer8">



<!-- / breadcrumb -->

<!-- pm notification -->

<!-- / pm notification -->









<table id="vbdrupalcontent" width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<colgroup>

<col width="*">
<col width="10"><col width="200">
</colgroup>
<tbody><tr valign="top">

<td width="100%">









<div class="sibling-navigation"><div class="page-links clear-block"><a class="sibling-navigation-prev" href="http://javascript.ru/blog/Andrej-Paranichev/Vvedenie-sobytiya">« Введение в события</a><a class="sibling-navigation-next" href="http://javascript.ru/blog/Andrej-Paranichev/Osnovy-programmnoj-animacii-JavaScript">Основы программной анимации на JavaScript »</a></div></div>





<table class="node-table node_blog node-full" id="node_981" style="border-top-width: 0pt;" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">

<tbody><tr>
	<td class="submitted">
		
                <table class="submitted-table"><tbody><tr>
                
                <td class="submitted-author">
		<a href="http://javascript.ru/person/Andrej-Paranichev" title="Информация о пользователе.">Андрей Параничев</a> (<a href="http://javascript.ru/blog/Andrej-Paranichev" title="Блог пользователя Андрей Параничев" class="usermore-link">блог</a>) , 26 дек 2008 - 03:36

                </td>
                

		                
                <td class="submitted-terms">
		<ul class="links"><li class="first last taxonomy_term_1"><a href="http://javascript.ru/tags/javascript" rel="tag" title="" class="taxonomy_term_1">javascript</a></li>
</ul>
		</td>
		


		             
                <td class="views-counter">
		просмотров:51672 
		</td>
		

		</tr></tbody></table>
	</td>

</tr>

<tr>
	<td class="node-content">



<h1 class="htitle">Измерения окна, документа и элементов</h1>


	
    

        

        <div class="toc toc-full">
<ol>
  <li>
    <a href="http://javascript.ru/blog/Andrej-Paranichev/Izmereniya-okna-dokumenta-elementov#razreshenie-ekrana">Разрешение экрана</a>
  </li>
  <li>
    <a href="http://javascript.ru/blog/Andrej-Paranichev/Izmereniya-okna-dokumenta-elementov#polozhenie-okna-brauzera">Положение окна браузера</a>
  </li>
  <li>
    <a href="http://javascript.ru/blog/Andrej-Paranichev/Izmereniya-okna-dokumenta-elementov#razmery-okna-brauzera">Размеры окна браузера</a>
  </li>
  <li>
    <a href="http://javascript.ru/blog/Andrej-Paranichev/Izmereniya-okna-dokumenta-elementov#skroll-okna-brauzera">Скролл окна браузера</a>
  </li>
  <li>
    <a href="http://javascript.ru/blog/Andrej-Paranichev/Izmereniya-okna-dokumenta-elementov#razmery-dokumenta-i-elementov">Размеры документа и элементов</a>
  </li>
  <li>
    <a href="http://javascript.ru/blog/Andrej-Paranichev/Izmereniya-okna-dokumenta-elementov#polozhenie-elementa-na-stranice">Положение элемента на странице</a>
  </li>
  <li>
    <a href="http://javascript.ru/blog/Andrej-Paranichev/Izmereniya-okna-dokumenta-elementov#zaklyuchenie">Заключение</a>
  </li>
</ol>

</div>

	


	

	<div class="field field-type-computed field-field-blog-toc-teaser">
  <div class="field-items">
      <div class="field-item"></div>
  </div>
</div>

<p>В решении многих задач может понадобиться определить положение, 
размер окна браузера, или каких-нибудь определенных элементов документа.
 В этой записи будут перечислены все способы определения этих значений.</p>
<h2 id="razreshenie-ekrana" class="header-link"><a href="#razreshenie-ekrana">Разрешение экрана</a></h2>
<p>Для определения ширины и высоты экрана пользователя используются свойства <code>width</code> и <code>height</code> объекта <code>window.screen</code>. Эти свойства доступны во всех браузерах.</p>
<div class="syntaxhighlighter nogutter  " id="highlighter_783374"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="content"><code class="plain">alert(</code><code class="string">"Разрешение вашего экрана: "</code><code class="plain">+ window.screen.width +</code><code class="string">"x"</code><code class="plain">+ window.screen.height);</code></td></tr></tbody></table></div></div></div><p><a href="javascript://" onclick="alert('Разрешение вашего экрана: '+ window.screen.width +'x'+ window.screen.height);">Выполнить этот код</a></p>
<h2 id="polozhenie-okna-brauzera" class="header-link"><a href="#polozhenie-okna-brauzera">Положение окна браузера</a></h2>
<p>Мнения разработчиков в вопросе какое же свойство должно хранить 
положение окна относительно верхней левой точки экрана, видимо, 
разошлись.</p>
<p>В итоге мы получили две пары свойств: <code>window.screenY</code>, <code>window.screenX</code> и <code>window.screenTop</code>, <code>window.screenLeft</code>. </p>
<p>Первые два работают в браузерах Mozilla (например Firefox), вторая 
пара работает в Internet Explorer и Opera. В браузерах, основанных на 
движке WebKit (например Safari, Chrome), обе пары работают и их значения
 равны друг другу соответственно.</p>
<p>Но невозможно абсолютно кросс-браузерно определить положение окна, 
поскольку в разных браузерах отсчет идет до разных точек. Дело в том, 
что браузеры Internet Explorer и Opera в значениях <code>screenTop</code> и <code>screenLeft</code>
 хранят координаты левого верхнего угла документа, а не всего окна, 
поэтому даже при развертывании на весь экран их значения будут не 
нулевые.</p>
<p>Напротив, остальные браузеры начинают отсчет от верхней левой точки 
самого окна, как и ожидается для этих свойств. Стоит отметить, что в 
Firefox, при развертывании окна на весь экран, значения <code>screenY</code> и <code>screenX</code> могут быть отрицательными.</p>
<p>Странно, но в Opera значения <code>screenY</code> и <code>screenX</code> не <code>undefined</code>,
 однако я не могу понять, что они значат. При любых перемещениях окна 
эти значения не меняются и все время отрицательны. Если это не очередной
 глюк Opera, и я что-то упустил, отпишите, пожалуйста, в комментариях.</p>
<p>Положение окна браузера можно изменить двумя методами:</p>
<div class="syntaxhighlighter  " id="highlighter_722527"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_722527_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_722527" menu="false" src="Izmereniya-okna-dokumenta-elementov_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="comments">// Переместить окно в коодинаты x, y:</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="plain">window.moveTo(&lt;x&gt;, &lt;y&gt;);</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="comments">// Сместить положение окна на значения dx, dy:</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>5</code></td><td class="content"><code class="comments">// (относительно текущего положения)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>6</code></td><td class="content"><code class="plain">window.moveBy(&lt;dx&gt;, &lt;dy&gt;);</code></td></tr></tbody></table></div></div></div><h2 id="razmery-okna-brauzera" class="header-link"><a href="#razmery-okna-brauzera">Размеры окна браузера</a></h2>
<p>Под размерами окна браузера подразумеваются как размер всего окна 
целиком (вместе с хромом и панелями), так и размер видимой части 
документа (вьюпорт), или другими словами, размер окна браузера без 
панелей и хрома.</p>
<p>К сожалению, с получением этих значений больше проблем, чем может показаться на первый взгляд.</p>
<p>Для получения размеров окна браузера целиком во всех браузерах, кроме Internet Explorer, вы можете использовать свойства <code>window.outerWidth</code> и <code>window.outerHeight</code>. И, насколько я понимаю, аналогов для Internet Explorer не существует.</p>
<p>С размерами вьюпорта тоже существуют проблемы. Дело в том, что в 
зависимости от браузера и типа документа значения будут разные, в 
частности - не всегда ясно, будет ли размер скроллбара учитываться, или 
нет.</p>
<p>Во всех браузерах, кроме Internet Explorer, вы можете получить размер вьюпорта с помощью свойств <code>window.innerWidth</code> и <code>window.innerHeight</code>. Эти свойства всегда будут включать ширину, или высоту скроллбара, что в некоторых задачах неуместно.</p>
<p>Другим способом определения размеров вьюпорта могут служить свойства <code>clientWidth</code> и <code>clientHeight</code> объекта <code>document.documentElement</code>, или, другими словами, элемента <code>html</code> текущего документа.</p>
<div class="syntaxhighlighter nogutter  " id="highlighter_750792"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="content"><code class="keyword">var</code> <code class="plain">html = document.documentElement;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="plain">alert(</code><code class="string">"Размер вьюпорта: "</code><code class="plain">+ html.clientWidth +</code><code class="string">"х"</code><code class="plain">+ html.clientHeight);</code></td></tr></tbody></table></div></div></div><p><a href="javascript://" onclick="alert('Размер вьюпорта: '+ document.documentElement.clientWidth +'х'+ document.documentElement.clientHeight);">Выполнить этот код</a></p>
<p>Но это справедливо только для режима следования стандартам 
(CSS1Compat mode), поэтому приведенный выше код работает верно в этом 
документе.</p>
<p>Но если у страницы не будет указан doctype, то в некоторых браузерах свойства <code>clientWidth</code> и <code>clientHeight</code> объекта <code>document.documentElement</code> будут иметь значения ширины и высоты всего документа целиком, а не только видимой его части, в то время как <code>document.body.clientWidth</code> и <code>document.body.clientHeight</code> наоборот будут иметь значения размеров вьюпорта.</p>
<p>И учитывая то, что нет возможности узнать, что является размерами вьюпорта - свойства <code>document.documentElement</code> или <code>document.body</code>
 (поскольку они оба существуют, но смысл значений может быть разный), то
 получается, что кросс-браузерное определение размеров вьюпорта этим 
способом - невозможно, если документ отображается не в режиме следования
 стандартам.</p>
<p>Размеры окна браузера можно изменить двумя методами:</p>
<div class="syntaxhighlighter  " id="highlighter_835279"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_835279_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_835279" menu="false" src="Izmereniya-okna-dokumenta-elementov_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="comments">// Изменить размер окна к ширине равной width и высоте равной height:</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="plain">window.resizeTo(&lt;width&gt;, &lt;height&gt;);</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="comments">// Изменить ширину окна на значение dwidth и высоту - на dheight:</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>5</code></td><td class="content"><code class="comments">// (относительно текущего размера)</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>6</code></td><td class="content"><code class="plain">window.resizeBy(&lt;dwidth&gt;, &lt;dheight&gt;);</code></td></tr></tbody></table></div></div></div><h2 id="skroll-okna-brauzera" class="header-link"><a href="#skroll-okna-brauzera">Скролл окна браузера</a></h2>
<p>Сколлбар имеет несколько параметров: ширина, высота, значение прокрутки сверху, значение прокрутки слева.</p>
<p>Первые два параметра определяются свойствами <code>scrollWidth</code> и <code>scrollHeight</code> объекта <code>document.documentElement</code>. Это, опять же, справедливо только для режима следования стандартам.</p>
<p>Значения ширины и высоты прокрутки окна - количество пикселей, 
которые могут быть прокручены скроллом. Другими словами - прямоугольник,
 образованный всеми видимыми элементами документа.</p>
<p>Примечание на счет элементов я сделал не просто так: если 
какой-нибудь абсолютно позиционированный элемент будет "вылезать" за 
пределы <code>body</code>, то он "растянет" ширину/высоту скролла, но размеры <code>document.body</code> останутся прежними. Напротив, если размеры документа меньше, чем размеры вьюпорта - то значения <code>scrollWidth</code> и <code>scrollHeight</code> будут равны размерам документа, а не всего окна.</p>
<p>Стоит отметить, что как и в случае с размерами вьюпорта, в режиме "quirks mode" не всегда понятно, свойства какого элемента (<code>documentElement</code> или <code>body</code>) будут иметь нужные нам значения скролла.</p>
<p>Для того, чтобы убедится в том, что в разных браузерах эти свойства 
имеют разные значения, можете попробовать выполнить тесты, 
представленные по этой ссылке, в разных браузерах: <!--noindex--><a rel="nofollow" href="http://www.quirksmode.org/viewport/experiments/body.html" class="liexternal">http://www.quirksmode.org/viewport/experiments/body.html</a><!--/noindex--></p>
<p>Для того, чтобы определить на сколько пикселей прокручен документ, нужно обратиться к свойствам <code>scrollTop</code> и <code>scrollLeft</code> объекта <code>document.documentElement</code>, если браузер в режиме следования стандартам, или <code>document.body</code>, если браузер в режиме "quirks mode".</p>
<div class="syntaxhighlighter nogutter  " id="highlighter_965883"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="content"><code class="keyword">var</code> <code class="plain">html = document.documentElement;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="plain">alert(</code><code class="string">"Вы уже прокрутили "</code><code class="plain">+ html.scrollTop +</code><code class="string">"px этой страницы"</code><code class="plain">);</code></td></tr></tbody></table></div></div></div><p><a href="javascript://" onclick="alert('Вы уже прокрутили '+ document.documentElement.scrollTop +'px этой страницы');">Выполнить этот код</a></p>
<p>В браузерах на движке Mozilla (Firefox) или WebKit (chrome, safari) вы можете воспользоваться свойствами <code>window.scrollY</code> и <code>window.scrollX</code> для определения этих значений. Они будут равны <code>scrollTop</code> и <code>scrollLeft</code> соответственно.</p>
<p>Из скрипта вы можете управлять прокруткой страницы, пользуясь следующими методами (обратите внимание на очередность параметров):</p>
<div class="syntaxhighlighter  " id="highlighter_23254"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_23254_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_23254" menu="false" src="Izmereniya-okna-dokumenta-elementov_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>01</code></td><td class="content"><code class="comments">// Изменить положение прокрутки к определенным значениям top и left:</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>02</code></td><td class="content"><code class="plain">window.scrollTo(&lt;left&gt;, &lt;top&gt;);</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>03</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>04</code></td><td class="content"><code class="comments">// Сместить положение прокрутки на определенные значения dtop и dleft</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>05</code></td><td class="content"><code class="comments">// (относительно текущих значений):</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>06</code></td><td class="content"><code class="plain">window.scrollBy(&lt;dleft&gt;, &lt;dtop&gt;);</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>07</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>08</code></td><td class="content"><code class="comments">// Сместить положение прокрутки на высоту lines строк документа:</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>09</code></td><td class="content"><code class="plain">window.scrollByLines(lines);</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>10</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>11</code></td><td class="content"><code class="comments">// Сместить положение прокрутки на высоту pages страниц документа</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>12</code></td><td class="content"><code class="comments">// Под страницей подразумевается высота видимой части документа</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>13</code></td><td class="content"><code class="plain">window.scrollByPages(pages);</code></td></tr></tbody></table></div></div></div><h2 id="razmery-dokumenta-i-elementov" class="header-link"><a href="#razmery-dokumenta-i-elementov">Размеры документа и элементов</a></h2>
<p>Одна из самых часто встречаемых задач - определение размера элемента.</p>
<p>Дело в том, что не всегда достаточно узнать какие значения размеров 
были установлены через стили элемента и особенно это касается 
"резиновых" элементов (которые растягиваются в зависимости от размеров 
их содержания), или элементов с фиксированными размерами, но имеющих 
внутренние отступы.</p>
<p>Во всех браузерах, независимо от режима, вы можете получить размер элемента с помощью свойств <code>offsetWidth</code> и <code>offsetHeight</code>.</p>
<p>Для демонстрации, небольшой пример:</p>
<div style="background: #004B52; color: #fff; padding: 5px" onclick="alert('Размер элемента:' + this.offsetWidth +'x'+ this.offsetHeight)">
Элемент с не фиксированной шириной и высотой.<br> Кликните для появления сообщения.
</div>
<p>Код примера:</p>
<div class="syntaxhighlighter nogutter  " id="highlighter_687102"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="content"><code class="plain">element.onclick = </code><code class="keyword">function</code><code class="plain">() {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">alert(</code><code class="string">"Размер элемента:"</code> <code class="plain">+ </code><code class="keyword">this</code><code class="plain">.offsetWidth +</code><code class="string">"x"</code><code class="plain">+ </code><code class="keyword">this</code><code class="plain">.offsetHeight);</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="content"><code class="plain">}</code></td></tr></tbody></table></div></div></div><p>
Точно так же можно определить размер всего документа, точнее размеры элемента <code>body</code>:</p>
<div class="syntaxhighlighter nogutter  " id="highlighter_508431"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="content"><code class="plain">alert(</code><code class="string">"Размер документа: "</code><code class="plain">+ document.body.offsetWidth +</code><code class="string">"x"</code><code class="plain">+ document.body.offsetHeight);</code></td></tr></tbody></table></div></div></div><p><a href="javascript://" onclick="alert('Размер документа: '+ document.body.offsetWidth +'x'+ document.body.offsetHeight);">Выполнить код примера</a></p>
<h2 id="polozhenie-elementa-na-stranice" class="header-link"><a href="#polozhenie-elementa-na-stranice">Положение элемента на странице</a></h2>
<p>Одна из самых распространенных задач - определение абсолютной позиции элемента относительно левого верхнего угла документа.</p>
<p>Для определения позиции используются следующие свойства элемента:<br>
<code>offsetTop</code> - отступ сверху, измеряется в пикселах относительно родительского элемента.</p>
<p><code>offsetLeft</code> - отступ слева, измеряется в пикселах относительно родительского элемента.</p>
<p><code>offsetParent</code> - ближайший родитель, относительно которого делается отсчет. Его значение будет <code>null</code> если текущий элемент невидим (<code>display: none</code>) или это корневой элемент документа.</p>
<p>Поскольку значение считается от ближайшего родителя, то абсолютная 
позиция относительно верхнего левого угла документа обычно считается в 
цикле, который завершается тогда, когда значение <code>offsetParent</code> будет равно <code>null</code>.</p>
<p>Обычно, функция по определению абсолютной позиции выглядит следующим образом:</p>
<div class="syntaxhighlighter  " id="highlighter_5492"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_5492_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_5492" menu="false" src="Izmereniya-okna-dokumenta-elementov_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="keyword">function</code> <code class="plain">offsetPosition(element) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">var</code> <code class="plain">offsetLeft = 0, offsetTop = 0;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">do</code> <code class="plain">{</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">offsetLeft += element.offsetLeft;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>5</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">offsetTop&nbsp; += element.offsetTop;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>6</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">} </code><code class="keyword">while</code> <code class="plain">(element = element.offsetParent);</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>7</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">return</code> <code class="plain">[offsetLeft, offsetTop];</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>8</code></td><td class="content"><code class="plain">}</code></td></tr></tbody></table></div></div></div><p>
Демонстрационный пример:</p>
<script type="text/javascript">
function offsetPosition(element) {
    var offsetLeft = 0, offsetTop = 0;
    do {
        offsetLeft += element.offsetLeft;
        offsetTop  += element.offsetTop;
    } while (element = element.offsetParent);
    return [offsetLeft, offsetTop];
}
</script><div style="background: #004B52; color: #fff; padding: 5px" onclick="alert('Позиция элемента на странице:' + offsetPosition(this)[0] +'x'+ offsetPosition(this)[1])">
Кликните для появления сообщения.
</div>
<p>Таким способом можно считать позицию как статичных элементов (<code>position: static</code>), так и элементов с абсолютной позицией (<code>position: absolute</code>).</p>
<h2 id="zaklyuchenie" class="header-link"><a href="#zaklyuchenie">Заключение</a></h2>
<p>Надеюсь, что данная запись поможет вам лучше разобраться в измерениях
 документа и его элементов. Буду раз услышать замечания или вопросы в 
комментариях.</p>


	
	</td>
</tr>
<tr>
<td>


<div style="float:left; width:120px">
<div class="vote-up-down-widget"><span class="up-inact" onclick="jAlert('Для голосования зайдите в сайт')"></span><span id="vote_points_981" class="vote-points vote-positive">+11</span><span class="down-inact" onclick="jAlert('Для голосования зайдите в сайт')" <="" span=""></span></div>
</div>



<div style="float:right; height: 20px; line-height: 20px">
	<ul class="links"><li class="first last blog_usernames_blog"><a href="http://javascript.ru/blog/Andrej-Paranichev" title="Прочитать последние записи в блоге пользователя Андрей Параничев." class="blog_usernames_blog">Блог: Андрей Параничев</a></li>
</ul>
</div>

</td>
</tr>
</tbody></table>
<br>


<div class="sibling-navigation"><div class="page-links clear-block"><a class="sibling-navigation-prev" href="http://javascript.ru/blog/Andrej-Paranichev/Vvedenie-sobytiya">« Введение в события</a><a class="sibling-navigation-next" href="http://javascript.ru/blog/Andrej-Paranichev/Osnovy-programmnoj-animacii-JavaScript">Основы программной анимации на JavaScript »</a></div></div>

<div id="comments"><a id="comment-878"></a>
<table class="comment-table tborder comment-author-501" id="comment-878" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: <a href="http://javascript.ru/person/Octane" title="Информация о пользователе.">Octane</a>, дата: 27 декабря, 2008 - 00:23
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-878">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_878">
	

<div class="comment-body">
	<p>Ожидал увидеть еще способ кросс-браузерного получения координат мыши <img src="Izmereniya-okna-dokumenta-elementov_files/smile.gif" title="" alt=""></p>
<p>Взяв реализацию из jQuery и немного переделав её, получил:</p>
<div class="syntaxhighlighter  " id="highlighter_938623"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_938623_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_938623" menu="false" src="Izmereniya-okna-dokumenta-elementov_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="keyword">var</code> <code class="plain">mousePosition = </code><code class="keyword">function</code><code class="plain">(ie) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">return</code> <code class="plain">ie ? </code><code class="keyword">function</code><code class="plain">(doc, body) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">return</code> <code class="keyword">function</code><code class="plain">(e) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">return</code> <code class="plain">{x:
 e.clientX + (doc &amp;&amp; doc.scrollLeft || body &amp;&amp; 
body.scrollLeft || 0) - (doc.clientLeft || 0), y: e.clientY + (doc 
&amp;&amp; doc.scrollTop || body &amp;&amp; body.scrollTop || 0) - 
(doc.clientTop || 0)};</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>5</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">};</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>6</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">}(document.documentElement, document.body) : </code><code class="keyword">function</code><code class="plain">(e) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>7</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">return</code> <code class="plain">{x: e.pageX, y: e.pageY};</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>8</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>9</code></td><td class="content"><code class="plain">}(</code><code class="comments">/*@cc_on 1 @*/</code><code class="plain">);</code></td></tr></tbody></table></div></div></div><p>Сам не разбирался еще, что происходит в этом большом выражении, возможно получится упростить <img src="Izmereniya-okna-dokumenta-elementov_files/smile.gif" title="" alt=""></p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/981/878" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-1136"></a>
<table class="comment-table tborder comment-author-0" id="comment-1136" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: Narthex (не зарегистрирован), дата: 7 марта, 2009 - 19:00
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1136">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1136">
	

<div class="comment-body">
	<p>Много полезного, как раз то, что искал. Совсем не то, что ковыряться в Prototype, jQuery или Dojo. Спасибо!</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/981/1136" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-1275"></a>
<table class="comment-table tborder comment-author-240" id="comment-1275" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: <a href="http://javascript.ru/person/hogart" title="Информация о пользователе.">hogart</a>, дата: 31 марта, 2009 - 15:33
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1275">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1275">
	

<div class="comment-body">
	<p>Должен отметить, что функция получения координат элемента 
относительно верхнего левого угла документа даст неверный результат в 
IE6, если в цепочке offsetParent попадется элемент с position: relative.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/981/1275" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-1388"></a>
<table class="comment-table tborder comment-author-0" id="comment-1388" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: Дмитлантис (не зарегистрирован), дата: 22 апреля, 2009 - 17:33
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1388">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1388">
	

<div class="comment-body">
	<p>Афтор зачод! Наитолковые статьи в рунете по ЯС! Сразу видно берется 
за дело с головой. Пишы исчо! Где я только не рылся за этим материалом а
 оно вот он чо! всё тут и на блюдечге!!<br>
// З.Ы. Илья - ф основную книгу эту статью ИМХО этот каждому пригодится, а в этих блогах фиг нашол, ещё повезло что наткнулся =)</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/981/1388" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-1451"></a>
<table class="comment-table tborder comment-author-0" id="comment-1451" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: Kirill (не зарегистрирован), дата: 2 мая, 2009 - 20:54
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1451">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1451">
	

<div class="comment-body">
	<p>автор пишы исчо это точно:) спс за размеры окна браузера</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/981/1451" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-1452"></a>
<table class="comment-table tborder comment-author-1" id="comment-1452" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: <a href="http://javascript.ru/person/Ilya-Kantor" title="Информация о пользователе.">Илья Кантор</a>, дата: 2 мая, 2009 - 23:23
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1452">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1452">
	

<div class="comment-body">
	<p>На основе некоторых идей этой статьи создан основной материал сайта.</p>
<p>Спасибо за статью, Андрей!</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/981/1452" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-1493"></a>
<table class="comment-table tborder comment-author-1387" id="comment-1493" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: <a href="http://javascript.ru/person/x-yuri" title="Информация о пользователе.">x-yuri</a>, дата: 11 мая, 2009 - 01:49
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-1493">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_1493">
	

<div class="comment-body">
	<p><strong>Андрей Параничев</strong>, а что можешь сказать по поводу следующего способа определения разеров вьюпорта - <!--noindex--><a rel="nofollow" href="http://www.howtocreate.co.uk/tutorials/javascript/browserwindow" title="http://www.howtocreate.co.uk/tutorials/javascript/browserwindow" class="liexternal">http://www.howtocreate.co.uk/tutorials/javascript/browserwindow</a><!--/noindex--></p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/981/1493" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-2031"></a>
<table class="comment-table tborder comment-author-0" id="comment-2031" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: vk (не зарегистрирован), дата: 9 августа, 2009 - 13:22
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-2031">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_2031">
	

<div class="comment-body">
	<p>В описаниях функций параметры наоборот.<br>
Нужно<br>
window.scrollTo(left, top);<br>
window.scrollBy(left, top);<br>
Источник:<br>
<!--noindex--><a rel="nofollow" href="http://www.java2s.com/Code/JavaScriptReference/Javascript-Methods/scrollBySyntaxParametersandNote.htm" title="http://www.java2s.com/Code/JavaScriptReference/Javascript-Methods/scrollBySyntaxParametersandNote.htm" class="liexternal">http://www.java2s.com/Code/JavaScriptReference/Javascript-Methods/scroll...</a><!--/noindex--><br>
<!--noindex--><a rel="nofollow" href="http://www.java2s.com/Code/JavaScriptReference/Javascript-Methods/scrollToSyntaxParametersandNote.htm" title="http://www.java2s.com/Code/JavaScriptReference/Javascript-Methods/scrollToSyntaxParametersandNote.htm" class="liexternal">http://www.java2s.com/Code/JavaScriptReference/Javascript-Methods/scroll...</a><!--/noindex--></p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/981/2031" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><div class="indented"><a id="comment-2048"></a>
<table class="comment-table tborder comment-author-105" id="comment-2048" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: <a href="http://javascript.ru/person/Andrej-Paranichev" title="Информация о пользователе.">Андрей Параничев</a>, дата: 16 августа, 2009 - 01:25
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-2048">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_2048">
	

<div class="comment-body">
	<p>Спасибо, всегда путаю, что x (икс) это "left" в переносе на слова.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/981/2048" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br></div><a id="comment-2035"></a>
<table class="comment-table tborder comment-author-2882" id="comment-2035" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: <a href="http://javascript.ru/person/JSTalker" title="Информация о пользователе.">JSTalker</a>, дата: 11 августа, 2009 - 09:59
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-2035">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_2035">
	

<div class="comment-body">
	<p>Классная статья, спасибо!</p>
<p>Но подскажите, как эти полезные свойства применить собственно к 
элементам страницы: к примеру чтоб таблица, структурирующая GUI, 
масштабировалась относительно размеров видимой обл-ти? К ее атрибутам не
 применимы свойства <img src="Izmereniya-okna-dokumenta-elementov_files/sad.gif" title="Sad" alt="Sad"> :</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/981/2035" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-2102"></a>
<table class="comment-table tborder comment-author-0" id="comment-2102" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: Гость (не зарегистрирован), дата: 26 августа, 2009 - 15:05
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-2102">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_2102">
	

<div class="comment-body">
	<p>Как узнать ширину и высоту элемента div до его отображения, это реально? Заранее спасибо</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/981/2102" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-2515"></a>
<table class="comment-table tborder comment-author-161" id="comment-2515" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: <a href="http://javascript.ru/person/eugenyk" title="Информация о пользователе.">EugenyK</a>, дата: 30 октября, 2009 - 16:26
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-2515">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_2515">
	

<div class="comment-body">
	<p>Для элемента div<br>
"Элемент с не фиксированной шириной и высотой.<br>
Кликните для появления сообщения.":<br>
this.offsetWidth (FF3) = 609<br>
this.offsetWidth (Chrome) = 609<br>
this.offsetWidth (opera10) = 613<br>
this.offsetWidth (IE7) = 613<br>
Высота offsetHeight во всех браузерах посчиталась одинаково.</p>
<p>Для body везде получились различные значения высоты.</p>
<p>По теме ещё статья на quirksmode<br>
<!--noindex--><a rel="nofollow" href="http://www.quirksmode.org/dom/w3c_cssom.html#elementview" title="http://www.quirksmode.org/dom/w3c_cssom.html#elementview" class="liexternal">http://www.quirksmode.org/dom/w3c_cssom.html#elementview</a><!--/noindex--></p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/981/2515" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-2563"></a>
<table class="comment-table tborder comment-author-2947" id="comment-2563" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: <a href="http://javascript.ru/person/Ntropy" title="Информация о пользователе.">Ntropy</a>, дата: 6 ноября, 2009 - 00:09
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-2563">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_2563">
	

<div class="comment-body">
	<p>В качестве попытки кроссброузерного определения положения и размеры 
окна, можно попробовать его пробно подвигать и поизменять размеры. В 
этом случае сразу выяснится что учитывается для возвращаемых значений.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/981/2563" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-2578"></a>
<table class="comment-table tborder comment-author-3755" id="comment-2578" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: <a href="http://javascript.ru/person/Vladimir_O" title="Информация о пользователе.">Vladimir_O</a>, дата: 9 ноября, 2009 - 16:43
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-2578">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_2578">
	

<div class="comment-body">
	<p>А что вы думаете по поводу такого кроссбраузерного определения размера вьюпорта:</p>
<div class="syntaxhighlighter  " id="highlighter_447167"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_447167_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_447167" menu="false" src="Izmereniya-okna-dokumenta-elementov_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="keyword">var</code> <code class="plain">screenWidht = window.innerWidth;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">if</code><code class="plain">(!screenWidht) {</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">if</code><code class="plain">(document.documentElement) {</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">screenWidht = document.documentElement.clientWidth;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>5</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>6</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">screenWidht = Math.min(screenWidht, document.body.clientWidth);</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>7</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">}</code></td></tr></tbody></table></div></div></div>
</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/981/2578" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><div class="indented"><a id="comment-2948"></a>
<table class="comment-table tborder comment-author-0" id="comment-2948" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: Жорж Борман (не зарегистрирован), дата: 24 декабря, 2009 - 23:52
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-2948">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_2948">
	

<div class="comment-body">
	<p>в IE7 не сработал, выдал 0</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/981/2948" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-2949"></a>
<table class="comment-table tborder comment-author-0" id="comment-2949" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: Жорж Борман (не зарегистрирован), дата: 24 декабря, 2009 - 23:57
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-2949">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_2949">
	

<div class="comment-body">
	<p>Я понял. Для IE надо math.max получать. Спасибо</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/981/2949" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br></div><a id="comment-3564"></a>
<table class="comment-table tborder comment-author-0" id="comment-3564" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: Гость (не зарегистрирован), дата: 26 февраля, 2010 - 15:19
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-3564">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_3564">
	

<div class="comment-body">
	<p>Работает корректно во всех браузерах!<br>
Определяет размер рабочей области окна!<br>
+ размер области документа (с учетом дивов с абсолютным позициониррованием)<br>
+ работает и в ИЕ6 и в Сафари</p>
<div class="syntaxhighlighter  " id="highlighter_813299"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_813299_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_813299" menu="false" src="Izmereniya-okna-dokumenta-elementov_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>1</code></td><td class="content"><code class="keyword">function</code> <code class="plain">gss() { </code><code class="keyword">var</code> <code class="plain">w = document.documentElement; </code><code class="keyword">var</code> <code class="plain">d = document.body;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>2</code></td><td class="content"><code class="keyword">if</code> <code class="plain">(w.scrollHeight &lt; d.scrollHeight) { </code><code class="keyword">var</code> <code class="plain">h = d.scrollHeight } </code><code class="keyword">else</code> <code class="plain">{ </code><code class="keyword">var</code> <code class="plain">h = w.scrollHeight } </code><code class="keyword">if</code> <code class="plain">(h&lt;w.clientHeight) { h = w.clientHeight }</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>3</code></td><td class="content"><code class="keyword">if</code> <code class="plain">(w.scrollWidth &lt; d.scrollWidth) { </code><code class="keyword">var</code> <code class="plain">wd = d.scrollWidth } </code><code class="keyword">else</code> <code class="plain">{ </code><code class="keyword">var</code> <code class="plain">wd = w.scrollWidth } </code><code class="keyword">if</code> <code class="plain">(wd&lt;w.clientWidth) { wd = w.clientWidth }</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>4</code></td><td class="content"><code class="keyword">return</code> <code class="plain">{ ww:w.clientWidth, wh:w.clientHeight, wsl:w.scrollLeft, wst:w.scrollTop, dw:wd, dh:h } }</code></td></tr></tbody></table></div></div></div>
</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/981/3564" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-3565"></a>
<table class="comment-table tborder comment-author-0" id="comment-3565" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: Гость, дата: 26 февраля, 2010 - 15:21
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-3565">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_3565">
	

<div class="comment-body">
	<p>Ой, чуть не забыл пояснить.<br>
функция возвращает:<br>
ww - window width<br>
wh - window height<br>
dw - document width<br>
dh - document height<br>
wsl - window scroll left<br>
wst - window scroll top</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/981/3565" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-3566"></a>
<table class="comment-table tborder comment-author-0" id="comment-3566" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: Гость (не зарегистрирован), дата: 26 февраля, 2010 - 15:28
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-3566">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_3566">
	

<div class="comment-body">
	<p>Снова я, уж простите, доработанная функция:</p>
<div class="syntaxhighlighter  " id="highlighter_890924"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_890924_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_890924" menu="false" src="Izmereniya-okna-dokumenta-elementov_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>01</code></td><td class="content"><code class="keyword">function</code> <code class="plain">GetSizes() { </code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>02</code></td><td class="content"><code class="keyword">var</code> <code class="plain">w = document.documentElement; </code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>03</code></td><td class="content"><code class="keyword">var</code> <code class="plain">d = document.body;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>04</code></td><td class="content"><code class="plain">h = Math.max( w.scrollHeight, d.scrollHeight, w.clientHeight); </code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>05</code></td><td class="content"><code class="plain">wd = Math.max( w.scrollWidth, d.scrollWidth, w.clientWidth);</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>06</code></td><td class="content"><code class="keyword">return</code> <code class="plain">{ </code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>07</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;</code><code class="plain">ww:w.clientWidth, </code><code class="comments">//window width</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>08</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;</code><code class="plain">wh:w.clientHeight, </code><code class="comments">//window height</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>09</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;</code><code class="plain">wsl:w.scrollLeft, </code><code class="comments">//window scroll left</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>10</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;</code><code class="plain">wst:w.scrollTop, </code><code class="comments">//window scroll top</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>11</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;</code><code class="plain">dw:wd, </code><code class="comments">//document width</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>12</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;</code><code class="plain">dh:h </code><code class="comments">//document height</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>13</code></td><td class="content"><code class="plain">} </code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>14</code></td><td class="content"><code class="plain">}</code></td></tr></tbody></table></div></div></div>
</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/981/3566" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><div class="indented"><a id="comment-14743"></a>
<table class="comment-table tborder comment-author-0" id="comment-14743" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: Гость (не зарегистрирован), дата: 29 декабря, 2011 - 08:51
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-14743">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_14743">
	

<div class="comment-body">
	<p>Пасибо, помогло</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/981/14743" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br></div><a id="comment-3639"></a>
<table class="comment-table tborder comment-author-0" id="comment-3639" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: Гость (не зарегистрирован), дата: 11 марта, 2010 - 15:14
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-3639">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_3639">
	

<div class="comment-body">
	<p>С этой функцией наткнулся на некоторые проблемы, все описать 
довольно сложно, лучше выложу исправленный код. Буду признателен если 
кто нибудь найдет баги и отпишет <a href="mailto:mail@atlas-is.ru" class="limailto">mail@atlas-is.ru</a>. Я тестировал на:<br>
ИЕ6 ИЕ7 опреа9/10 Мазилла 3,6 Safari(win32) Chrome<br>
для всех браузеров было 4 разных ситуации с разными доктайпами и т.д. в 
моем случае сейчас функция работает безупречно для: определения видимой 
области окна браузера (с корректным учетом скроллбаров). определения 
области документа/страницы с учетом всех элементов на странице (даже при
 абсолютном позиционировании). и смещение скролла.</p>
<div class="syntaxhighlighter  " id="highlighter_210592"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_210592_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_210592" menu="false" src="Izmereniya-okna-dokumenta-elementov_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>01</code></td><td class="content"><code class="keyword">function</code>&nbsp; <code class="plain">GetSizes(){</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>02</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">var</code> <code class="plain">w=document.documentElement; </code><code class="keyword">var</code> <code class="plain">d=document.body;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>03</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">var</code> <code class="plain">tww = document.compatMode==</code><code class="string">'CSS1Compat'</code> <code class="plain">&amp;&amp; !window.opera?w.clientWidth:d.clientWidth;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>04</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">var</code> <code class="plain">twh = document.compatMode==</code><code class="string">'CSS1Compat'</code> <code class="plain">&amp;&amp; !window.opera?w.clientHeight:d.clientHeight;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>05</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">var</code> <code class="plain">sl = (window.scrollX)?window.scrollX:(w.scrollLeft)?w.scrollLeft:d.scrollLeft;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>06</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">var</code> <code class="plain">st = (window.scrollY)?window.scrollY:(w.scrollTop)?w.scrollTop:d.scrollTop;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>07</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">var</code> <code class="plain">wW1
 = (window.innerHeight &amp;&amp; 
window.scrollMaxY)?d.scrollWidth:(d.scrollHeight &gt; 
d.offsetHeight)?d.scrollWidth:(w &amp;&amp; w.scrollHeight &gt; 
w.offsetHeight)?w.scrollWidth:d.offsetWidth;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>08</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">var</code> <code class="plain">wH1
 = (window.innerHeight &amp;&amp; 
window.scrollMaxY)?d.scrollHeight:(d.scrollHeight &gt; 
d.offsetHeight)?d.scrollHeight:(w &amp;&amp; w.scrollHeight &gt; 
w.offsetHeight)?w.scrollHeight:d.offsetHeight;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>09</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">var</code> <code class="plain">wW2 = (self.innerHeight)?self.innerWidth:(w &amp;&amp; w.clientHeight)?w.clientWidth:d.clientWidth; </code><code class="keyword">var</code> <code class="plain">pW = (wW1 &lt; wW2)?wW2:wW1;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>10</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">var</code> <code class="plain">wH2 = (self.innerHeight)?self.innerHeight:(w &amp;&amp; w.clientHeight)?w.clientHeight:d.clientHeight; </code><code class="keyword">var</code> <code class="plain">pH = (wH1 &lt; wH2)?wH2:wH1;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>11</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">pW = ($.browser.msie)?pW:Math.max(w.scrollWidth, w.clientWidth, d.scrollWidth, d.offsetWidth);</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>12</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">pH = ($.browser.msie)?pH:Math.max(w.scrollHeight, w.clientHeight, d.scrollHeight, d.offsetHeight);</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>13</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">if</code> <code class="plain">(window.opera){
 tww = (d.scrollWidth==d.clientWidth)?w.clientWidth:tww; twh = 
(d.scrollHeight==d.clientHeight)?w.clientHeight:twh;}</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>14</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">return</code> <code class="plain">{ </code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>15</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">winWidth:tww, </code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>16</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">winHeight: twh, </code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>17</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">winScrollLeft: sl, </code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>18</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">winScrollTop: st, </code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>19</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">pageWidth: pW, </code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>20</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">pageHeight: pH</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>21</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">} </code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>22</code></td><td class="content"><code class="plain">}</code></td></tr></tbody></table></div></div></div><p>
Надеюсь кому то помог! Потому как сам перерыл огромную кучу информации пока соорудил это.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/981/3639" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-4225"></a>
<table class="comment-table tborder comment-author-0" id="comment-4225" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: stig85 (не зарегистрирован), дата: 31 мая, 2010 - 06:20
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-4225">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_4225">
	

<div class="comment-body">
	<p>Да, уж! Молодец!</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/981/4225" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-4382"></a>
<table class="comment-table tborder comment-author-0" id="comment-4382" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: Шторм (не зарегистрирован), дата: 24 июня, 2010 - 03:20
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-4382">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_4382">
	

<div class="comment-body">
	<p>Спасибо. Долго искал эту информацию и нашел.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/981/4382" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-4623"></a>
<table class="comment-table tborder comment-author-8338" id="comment-4623" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: <a href="http://javascript.ru/person/edd_k" title="Информация о пользователе.">edd_k</a>, дата: 30 июля, 2010 - 00:49
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-4623">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_4623">
	

<div class="comment-body">
	<p>А я уже давно забил на попытки сооружать мегауниверсальные функции. Я следую таким правилам:<br>
- верстаю в xhtml со следующим шаблоном пустого дока:</p>
<div class="syntaxhighlighter  " id="highlighter_369860"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_369860_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_369860" menu="false" src="Izmereniya-okna-dokumenta-elementov_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>01</code></td><td class="content"><code class="plain">&lt;?</code><code class="keyword">xml</code> <code class="color1">version</code><code class="plain">=</code><code class="string">"1.0"</code> <code class="color1">encoding</code><code class="plain">=</code><code class="string">"windows-1251"</code> <code class="plain">?&gt;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>02</code></td><td class="content"><code class="plain">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>03</code></td><td class="content"><code class="plain">&lt;</code><code class="keyword">html</code> <code class="color1">xmlns</code><code class="plain">=</code><code class="string">"http://www.w3.org/1999/xhtml"</code> <code class="color1">xml:lang</code><code class="plain">=</code><code class="string">"en"</code> <code class="color1">lang</code><code class="plain">=</code><code class="string">"ru"</code><code class="plain">&gt;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>04</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>05</code></td><td class="content"><code class="plain">&lt;</code><code class="keyword">head</code><code class="plain">&gt;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>06</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">meta</code> <code class="color1">http-equiv</code><code class="plain">=</code><code class="string">"Content-Type"</code> <code class="color1">content</code><code class="plain">=</code><code class="string">"text/html; charset=windows-1251"</code> <code class="plain">/&gt;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>07</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">title</code><code class="plain">&gt;Title&lt;/</code><code class="keyword">title</code><code class="plain">&gt;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>08</code></td><td class="content"><code class="plain">&lt;/</code><code class="keyword">head</code><code class="plain">&gt;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>09</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>10</code></td><td class="content"><code class="plain">&lt;</code><code class="keyword">body</code><code class="plain">&gt;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>11</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>12</code></td><td class="content"><code class="plain">&lt;/</code><code class="keyword">body</code><code class="plain">&gt;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>13</code></td><td class="content"><code class="plain">&lt;/</code><code class="keyword">html</code><code class="plain">&gt;</code></td></tr></tbody></table></div></div></div><p>- если страница верстается php, то конечно же в нем шлется заголовок </p>
<div class="syntaxhighlighter nogutter  " id="highlighter_328172"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="content"><code class="plain">header(</code><code class="string">'Content-Type: text/html; charset=windows-1251'</code><code class="plain">);</code></td></tr></tbody></table></div></div></div><p>-
 если что-то пошло не так, значит накосячил в html-коде и он уже в 
квирк-моде, открываю в Опере, жму "Соблюдены ли web-стандарты" и 
добиваюсь успешной проверки на W3C-валидаторе. По-ходу, практически не 
встречаю в инете страниц, проходящих валидацию. Эта страничка например 
тоже не проходит - куча досадных ошибок типа не указан тип скрипта, блок
 стилей вставлен там где нельзя, спаны закрываются, но не открывались 
перед этим, id дублирующиеся и т.д. Очень распространен подход, когда в 
js пишут что-то типа </p>
<div class="syntaxhighlighter nogutter  " id="highlighter_547411"><div class="lines"><div class="line alt1"><table><tbody><tr><td class="content"><code class="plain">document.write(</code><code class="string">'&lt;scr'</code> <code class="plain">+ </code><code class="string">'ipt&gt;alert("Hello!");&lt;/scr'</code> <code class="plain">+ </code><code class="string">'ipt&gt;'</code><code class="plain">);</code></td></tr></tbody></table></div></div></div><p>(На
 этой странице такое есть) Ну а слеш в закрывающем теге кто экранировать
 будет!? Зачем делить слово SCRIPT на две части, если тут же ошибка 
потяжелее?</p>
<p>Такой код</p>
<div class="syntaxhighlighter  " id="highlighter_852552"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_852552_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_852552" menu="false" src="Izmereniya-okna-dokumenta-elementov_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>01</code></td><td class="content"><code class="plain">&lt;?</code><code class="keyword">xml</code> <code class="color1">version</code><code class="plain">=</code><code class="string">"1.0"</code> <code class="color1">encoding</code><code class="plain">=</code><code class="string">"windows-1251"</code> <code class="plain">?&gt;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>02</code></td><td class="content"><code class="plain">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>03</code></td><td class="content"><code class="plain">&lt;</code><code class="keyword">html</code> <code class="color1">xmlns</code><code class="plain">=</code><code class="string">"http://www.w3.org/1999/xhtml"</code> <code class="color1">xml:lang</code><code class="plain">=</code><code class="string">"en"</code> <code class="color1">lang</code><code class="plain">=</code><code class="string">"ru"</code><code class="plain">&gt;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>04</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>05</code></td><td class="content"><code class="plain">&lt;</code><code class="keyword">head</code><code class="plain">&gt;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>06</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">meta</code> <code class="color1">http-equiv</code><code class="plain">=</code><code class="string">"Content-Type"</code> <code class="color1">content</code><code class="plain">=</code><code class="string">"text/html; charset=windows-1251"</code> <code class="plain">/&gt;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>07</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">&lt;</code><code class="keyword">title</code><code class="plain">&gt;JS Sample&lt;/</code><code class="keyword">title</code><code class="plain">&gt;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>08</code></td><td class="content"><code class="plain">&lt;/</code><code class="keyword">head</code><code class="plain">&gt;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>09</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>10</code></td><td class="content"><code class="plain">&lt;</code><code class="keyword">body</code><code class="plain">&gt;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>11</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>12</code></td><td class="content"><code class="plain">&lt;</code><code class="keyword">script</code> <code class="color1">type</code><code class="plain">=</code><code class="string">"text/javascript"</code><code class="plain">&gt;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>13</code></td><td class="content"><code class="comments">&lt;!--</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>14</code></td><td class="content"><code class="comments">document.write('&lt;script&gt;alert(\'Hello!\');&lt;\/script&gt;');</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>15</code></td><td class="content"><code class="comments">document.write('&lt;script&gt;alert("Hello - 2!");&lt;\/script&gt;');</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>16</code></td><td class="content"><code class="comments">//--&gt;</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>17</code></td><td class="content"><code class="plain">&lt;/</code><code class="keyword">script</code><code class="plain">&gt;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>18</code></td><td class="content">&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>19</code></td><td class="content"><code class="plain">&lt;/</code><code class="keyword">body</code><code class="plain">&gt;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>20</code></td><td class="content"><code class="plain">&lt;/</code><code class="keyword">html</code><code class="plain">&gt;</code></td></tr></tbody></table></div></div></div><p>
проходит валидацию, ессесно работает и ничего не нужно делить. Нужно 
просто не забыть указать тип скрипта, вставить в нем 
коменты-ограничители для XML-парсера и экранировать символы / и ' в 
строках.</p>
<p>А когда половина страниц валидируются, другие в квирке рисуются, то конечно начинается каша, геморой, бессонные ночи и т.д.</p>
<p>Итак, начинать следует со стандартизации своих проектов и исправления
 в них ошибок перед каждым релизом (мы ж не роботы, конечно забываем 
временами и коменты вставлять и &lt; br &gt; вместо &lt; br /&gt; на 
скорую руку пишем) - отправка страницы прямо из браузера на W3C всегда 
под рукой.</p>
<p>Ну а когда валидация пройдена, то и гемороя меньше. Конечно если речь
 не идет о совсем старых браузерах, на которые я могу забить. Кто не 
может, тому мои искренние сожаления и моральная поддержка в тяжбах.</p>
<p>А так, провел небольшой тест на Опера 10.60 (пачка пердыдущих версий 
скорей всего то же выдаст), IE8 и FF 3.6.6. Создал корректную страницу с
 длинной таблицей на 100 строк, каждая строка имеет паддинг, прописанный
 в CSS, что в IE и в Фоксе приводит к увеличению высоты html (т.е. html 
становится длиннее body), аналогично и при div-верстке, т.е. лично 
таблицы тут ни при чем. Такая же фича наблюдается и в Опере ИНОГДА. 
Возможно в квирке - не проследил. В тестовом примере в Опере html не 
удлинился и не испортил страницу лишним белым куском на 700+ точек. </p>
<p>Результаты таковы (html - это document.documentElement):</p>
<pre>				Opera	FF	IE

window.screen.availWidth =	1280	1280	1280
window.screen.availHeight =	994	994	994

window.innerWidth =		1280	1280	-
window.innerHeight =		878	868	-

body.clientTop =		0	0	0
html.clientTop =		0	0	2

body.clientLeft =		0	0	0
html.clientLeft =		0	0	2

body.offsetWidth =		1263	1263	1259
html.offsetWidth =		1263	1263	1259
body.clientWidth =		1263	1263	1259
html.clientWidth =		1263	1263	1259
body.scrollWidth =		1263	1263	1259
html.scrollWidth =		1263	1263	1259

body.offsetHeight =		878	868	848
html.offsetHeight =		878	868	848
body.clientHeight =		878	868	848
html.clientHeight =		878	868	848
body.scrollHeight =		878	868	2471
html.scrollHeight =		2371	3000	3178

body.scrollLeft =		0	0	0
html.scrollLeft =		0	0	0
body.scrollTop =		0	0	0
html.scrollTop					
 - находясь в самом верху =	0	0	0
 - находясь в самом низу =	1493	2132	2330

html длиннее body?		нет	да	да

</pre><p>
Что в итоге? </p>
<p>1. Виевпорт во всех трех записан и в body, и в html корректно и с вычетом скролбара.</p>
<p>2. Во всех браузерах body.scrollTop равен 0 не зависимо от того, где 
мы находимся - вверху или внизу. В принципе, логично, у нас же html 
скролится, а не body.</p>
<p>2. Во всех браузерах offsetWidth и offsetHeight что у body, что у html равны размеру виевпорта.</p>
<p>3. Исходя из вышесказанного и увиденного полная высота именно body 
записана только в IE, в котором мы можем видеть, что body - 2471 px, а 
html - 3178 px; в Опере мы можем понадеяться, что лишней простыни после 
body не добавлено и следовательно его высота равна высоте html, а вот в 
Фоксе мы понятия не имеем, что body короче html и вообще короче ли или 
одинаковы.</p>
<p>Если нужно знать высоту именно body, то в ряде случаев можно 
попробовать запретить скрол html-у и выдать скролл body. Но в ряде 
случаев такой финт ушами не получится (если получится вообще, т.к. не 
пробовал еще). Например если у нас дизайн на 100% высоты видимого окна, 
тогда чтобы размер документа был на всю видимую высоту даже если контент
 коротковат для этого, нам придется в css выставить высоту 100% для 
html, body и контейнера, который содержит контент и например футер или 
бекграунд внизу. А в таком случае когда контента будет больше чем на 
высоту виевпорта указанные нами 100% для html будут делать его всегда не
 меньше чем body в нем,который тоже не меньше чем контент в нем. Т.е. 
фишка с коротким html и скролящимся в нем body - не возможна.</p>
<p>Вот так. Придется обходится высотой html или решать, как обойти проблему его удлинения...</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/981/4623" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-4934"></a>
<table class="comment-table tborder comment-author-7088" id="comment-4934" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: <a href="http://javascript.ru/person/Delis" title="Информация о пользователе.">Delis</a>, дата: 2 сентября, 2010 - 23:01
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-4934">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_4934">
	

<div class="comment-body">
	<p>Стоит отметить, что в IE8 (может и других версий) screen.width и 
window.screen.width возвращают не реальное разрешение экрана, а 
виртуальное (т.е. при изменении масштаба отображения меняется и 
разрешение, возвращаемое функциями, например, при помощи Ctrl+колесо 
мыши).</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/981/4934" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-5054"></a>
<table class="comment-table tborder comment-author-8224" id="comment-5054" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: <a href="http://javascript.ru/person/RE_" title="Информация о пользователе.">RE_</a>, дата: 20 сентября, 2010 - 11:19
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-5054">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_5054">
	

<div class="comment-body">
	<p><a href="http://javascript.ru/tutorial/events/properties#koordinaty-myshi:-clientx-y-pagex-y" title="">Доходчиво про ClientX/Y </a>и почему Опера их нормально обрабатывает.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/981/5054" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-5105"></a>
<table class="comment-table tborder comment-author-8952" id="comment-5105" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: <a href="http://javascript.ru/person/danik.js" title="Информация о пользователе.">danik.js</a>, дата: 30 сентября, 2010 - 06:38
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-5105">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_5105">
	

<div class="comment-body">
	<p>Статья улёт!<br>
Риспект <a href="http://javascript.ru/person/edd_k">автору</a> <a href="http://javascript.ru/blog/Andrej-Paranichev/Izmereniya-okna-dokumenta-elementov#comment-4623">етого каммента</a></p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/981/5105" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-5370"></a>
<table class="comment-table tborder comment-author-0" id="comment-5370" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: Гость (не зарегистрирован), дата: 25 октября, 2010 - 18:15
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-5370">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_5370">
	

<div class="comment-body">
	<p>Говорю Спасибо за сайт.<br>
Мне очень помог.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/981/5370" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-5935"></a>
<table class="comment-table tborder comment-author-0" id="comment-5935" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: Гость (не зарегистрирован), дата: 3 января, 2011 - 19:15
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-5935">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_5935">
	

<div class="comment-body">
	<p>Спасибо за статью! Но нигде не могу найти, как можно (и можно ли 
вообще) определить расстояние нижней границы элемента до нижней границы 
окна браузера. Может, кто-нибудь подскажет?.. Заранее спасибо!</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/981/5935" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-6469"></a>
<table class="comment-table tborder comment-author-0" id="comment-6469" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: Сочи олимпиада (не зарегистрирован), дата: 24 января, 2011 - 16:29
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-6469">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_6469">
	

<div class="comment-body">
	<p>Всем привет, Великолепная фраза</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/981/6469" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-6735"></a>
<table class="comment-table tborder comment-author-0" id="comment-6735" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: henteeJizet (не зарегистрирован), дата: 5 февраля, 2011 - 15:57
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-6735">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_6735">
	

<div class="comment-body">
	<p>Интересно конечно, но есть много вопросов по теме ИМХО. Давайте обсудим (мыло в подписи) или тут, если не затруднит</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/981/6735" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-7770"></a>
<table class="comment-table tborder comment-author-9661" id="comment-7770" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: <a href="http://javascript.ru/person/negr78" title="Информация о пользователе.">negr78</a>, дата: 14 июня, 2011 - 16:30
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-7770">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_7770">
	

<div class="comment-body">
	<p>"Буду раЗ услышать замечания ...."</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/981/7770" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-8355"></a>
<table class="comment-table tborder comment-author-0" id="comment-8355" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: vasiliyvasilevich (не зарегистрирован), дата: 19 августа, 2011 - 02:36
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-8355">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_8355">
	

<div class="comment-body">
	<p>помог scrollHeight снять с дива высоту динамически </p>
<p>var nextdata = 10; var controlXP = null;				</p>
<p>function ScrollModalWin () {</p>
<p>Modalheightobj = (Winmedia.WindowData.scrollHeight - 450);</p>
<p>EvenTop = Winmedia.WindowData.scrollTop;</p>
<p>                      // ---------------------------------- //</p>
<p>if ((EvenTop &gt;= Modalheightobj) &amp;&amp; (EvenTop &gt; controlXP) &amp;&amp; (controlXP &lt; Modalheightobj)){ </p>
<p>controlXP = Modalheightobj; </p>
<p>switch (arguments[0]) { </p>
<p>case '415' : case '425' : </p>
<p>SendContent(Array(arguments[0],arguments[1],arguments[2],arguments[3],(nextcon+=50)));</p>
<p>break;</p>
<p>}</p>
<p> }				</p>
<p>  }</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/981/8355" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-8485"></a>
<table class="comment-table tborder comment-author-0" id="comment-8485" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: Iskander (не зарегистрирован), дата: 5 сентября, 2011 - 22:56
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-8485">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_8485">
	

<div class="comment-body">
	<p>Интерестная статья..<br>
подскажите как сделать:<br>
при scrollTop(300)  , например, чтоб цвет блока менялся, нужно 
производить изменения по достижению этой высоты, без кликов и 
перезагрузок страницы</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/981/8485" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-8486"></a>
<table class="comment-table tborder comment-author-0" id="comment-8486" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: Гость (не зарегистрирован), дата: 5 сентября, 2011 - 22:59
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-8486">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_8486">
	

<div class="comment-body">
	<div class="syntaxhighlighter  " id="highlighter_170182"><div class="bar"><div class="toolbar"><div class="item copyToClipboard"><embed id="highlighter_170182_clipboard" type="application/x-shockwave-flash" title="копировать в буфер" allowscriptaccess="always" wmode="transparent" flashvars="highlighterId=highlighter_170182" menu="false" src="Izmereniya-okna-dokumenta-elementov_files/clipboard.swf" width="16" height="16"></div><a class="item viewSource" style="width: 16px; height: 16px;" title="показать чистый исходник в новом окне" href="#viewSource">показать чистый исходник в новом окне</a><a class="item noList" style="width: 16px; height: 16px;" title="Скрыть/показать номера строк" href="#noList">Скрыть/показать номера строк</a><a class="item printSource" style="width: 16px; height: 16px;" title="печать кода с сохранением подсветки" href="#printSource">печать кода с сохранением подсветки</a></div></div><div class="lines"><div class="line alt1"><table><tbody><tr><td class="number"><code>01</code></td><td class="content"><code class="plain">$(window).load(</code><code class="keyword">function</code><code class="plain">() {&nbsp;&nbsp;&nbsp;&nbsp; </code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>02</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">var</code> <code class="plain">d = $(</code><code class="string">"div.demo"</code><code class="plain">).scrollTop();</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>03</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">var</code> <code class="plain">v = 100;</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>04</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>05</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">$(</code><code class="string">"div.demo div p"</code><code class="plain">).css(</code><code class="string">"border"</code><code class="plain">, </code><code class="string">"5px solid green"</code><code class="plain">);</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>06</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>07</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">if</code> <code class="plain">(d &gt; v){</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>08</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">$(</code><code class="string">"div.demo div p"</code><code class="plain">).css(</code><code class="string">"border"</code><code class="plain">, </code><code class="string">"5px solid red"</code><code class="plain">);</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>09</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">$(</code><code class="string">"div.demo div p"</code><code class="plain">).text(</code><code class="string">".scrollTop(d): "</code> <code class="plain">+ d);</code></td></tr></tbody></table></div><div class="line alt2"><table><tbody><tr><td class="number"><code>10</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">};</code></td></tr></tbody></table></div><div class="line alt1"><table><tbody><tr><td class="number"><code>11</code></td><td class="content"><code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">});</code></td></tr></tbody></table></div></div></div><p>
вот такой вариант покачто получился, но приходится обновлять страницу =( что не есть хорошо...</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/981/8486" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-8501"></a>
<table class="comment-table tborder comment-author-10773" id="comment-8501" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: <a href="http://javascript.ru/person/Stimulus" title="Информация о пользователе.">Stimulus</a>, дата: 8 сентября, 2011 - 02:35
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-8501">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_8501">
	

<div class="comment-body">
	<p><img src="Izmereniya-okna-dokumenta-elementov_files/blink.gif" title="Blink" alt="Blink"> <strong>offetLeft</strong> - отступ слева, измеряется в пикселах относительно родительского элемента.</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/981/8501" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-14572"></a>
<table class="comment-table tborder comment-author-0" id="comment-14572" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: Гость (не зарегистрирован), дата: 29 ноября, 2011 - 04:14
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-14572">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_14572">
	

<div class="comment-body">
	<p>подскажите как можно проверить, до конца ли прокручена страница скроллом?</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/981/14572" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><a id="comment-14575"></a>
<table class="comment-table tborder comment-author-0" id="comment-14575" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr class="thead-row">
	<td class="thead">
		<div class="normal" style="float:left">
		Автор: KonstantinGreat (не зарегистрирован), дата: 29 ноября, 2011 - 17:32
		</div>
<a style="float: right; display: block; font-weight: normal;" href="#comment-14575">#permalink</a>
	</td>
</tr>
<tr>
	<td class="alt1" id="comment_14575">
	

<div class="comment-body">
	<p>есть вопрос к хорошей статье, у меня не работает функция 
offsetHeight в chrome, показывает 0, если принудительно не определен 
размер diva, что делать? заранее благодарен<br>
пс: хром с 15ой версии, привиос версии не проверял</p>

</div>
	</td>
</tr>

<tr>
	<td class="alt2" style="padding: 0px; text-align: right;">
	<ul class="links"><li class="first last comment_reply"><a href="http://javascript.ru/comment/reply/981/14575" class="comment_reply">Ответить</a></li>
</ul>
	</td>
</tr>

</tbody></table>
<br><h2 class="title">Отправить комментарий</h2> Приветствуются комментарии:
        <ul style="margin-top:0">
        <li style="font-style:italic">Полезные.</li>
        <li>Дополняющие прочитанное.</li>
        <li>Вопросы по прочитанному. Именно по прочитанному, чтобы ответ
 на него помог другим разобраться в предмете статьи. Другие вопросы 
могут быть удалены.<br>Для остальных вопросов и обсуждений есть <a href="http://javascript.ru/forum">форум</a>.</li>

        </ul>
        P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.

                     <div><form action="/comment/reply/981" accept-charset="UTF-8" method="post" id="comment-form" onsubmit="this.action+='?go=1'">
<div><div class="form-item">
 <label for="edit-name">Ваше имя: </label>
 <input maxlength="60" name="name" id="edit-name" size="30" value="Гость" class="form-text" type="text">
</div>
<div class="form-item">
 <label for="edit-mail">Адрес электронной почты: </label>
 <input maxlength="64" name="mail" id="edit-mail" size="30" class="form-text" type="text">
 <div class="description">Содержание этого поля является приватным и не предназначено к показу.</div>
</div>
<div class="form-item">
 <label for="edit-homepage">Домашняя страница: </label>
 <input maxlength="255" name="homepage" id="edit-homepage" size="30" class="form-text" type="text">
</div>
<div class="form-item">
 <label for="edit-comment">Комментарий: <span class="form-required" title="Это поле необходимо заполнить.">*</span></label>
 <div class="resizable-textarea"><span><div class="editor-container" id="editor-0"><input src="Izmereniya-okna-dokumenta-elementov_files/link.png" class="editor-image-button" onclick="editor.buttonClick(0, 0); return false;" id="editor-0-button-0" title="Вставить/Изменить ссылку" accesskey="" type="image"><input src="Izmereniya-okna-dokumenta-elementov_files/image.png" class="editor-image-button" onclick="editor.buttonClick(0, 1); return false;" id="editor-0-button-1" title="Вставка/Изменение изображения" accesskey="" type="image"><input src="Izmereniya-okna-dokumenta-elementov_files/bold.png" class="editor-image-button" onclick="editor.buttonClick(0, 2); return false;" id="editor-0-button-2" title="Жирный" accesskey="B" type="image"><input src="Izmereniya-okna-dokumenta-elementov_files/italic.png" class="editor-image-button" onclick="editor.buttonClick(0, 3); return false;" id="editor-0-button-3" title="Наклонный" accesskey="I" type="image"><input src="Izmereniya-okna-dokumenta-elementov_files/ol.png" class="editor-image-button" onclick="editor.buttonClick(0, 4); return false;" id="editor-0-button-4" title="Нумерованный список. Превращает выбранные строки в нумерованный список." accesskey="O" type="image"><input src="Izmereniya-okna-dokumenta-elementov_files/ul.png" class="editor-image-button" onclick="editor.buttonClick(0, 5); return false;" id="editor-0-button-5" title="Список по пунктам. Превращает выбранные строки в список." accesskey="U" type="image"><input value="#" class="editor-text-button" onclick="editor.buttonClick(0, 6); return false;" id="editor-0-button-6" title="Код" accesskey="C" type="button"><input value="CSS" class="editor-text-button" onclick="editor.buttonClick(0, 7); return false;" id="editor-0-button-7" title="CSS" accesskey="" type="button"><input value="HTML" class="editor-text-button" onclick="editor.buttonClick(0, 8); return false;" id="editor-0-button-8" title="HTML" accesskey="" type="button"><input value="JS" class="editor-text-button" onclick="editor.buttonClick(0, 9); return false;" id="editor-0-button-9" title="JS" accesskey="" type="button"><input value="PHP" class="editor-text-button" onclick="editor.buttonClick(0, 10); return false;" id="editor-0-button-10" title="PHP" accesskey="" type="button"><input src="Izmereniya-okna-dokumenta-elementov_files/preview.png" class="editor-image-button" onclick="editor.buttonClick(0, 11); return false;" id="editor-0-button-11" title="Предпросмотр" accesskey="P" type="image"></div><textarea cols="60" rows="15" name="comment" id="edit-comment" class="form-textarea resizable required  editor-textarea processed"></textarea><div style="margin-right: -2px;" class="grippie"></div></span></div>
</div>
<ul class="tips"><li>Адреса страниц и электронной почты автоматически преобразуются в ссылки.</li><li>Разрешены
 HTML-таги: &lt;strike&gt; &lt;a&gt; &lt;em&gt; &lt;strong&gt; 
&lt;cite&gt; &lt;code&gt; &lt;ul&gt; &lt;ol&gt; &lt;li&gt; &lt;dl&gt; 
&lt;dt&gt; &lt;dd&gt; &lt;u&gt; &lt;i&gt; &lt;b&gt; &lt;pre&gt; 
&lt;img&gt; &lt;abbr&gt; &lt;blockquote&gt; &lt;h1&gt; &lt;h2&gt; 
&lt;h3&gt; &lt;h4&gt; &lt;h5&gt; &lt;p&gt; &lt;div&gt; &lt;span&gt; 
&lt;sub&gt; &lt;sup&gt;</li><li>Строки и параграфы переносятся автоматически.</li><li><a href="http://javascript.ru/filter/tips/1#filter-smileys-0">Текстовые смайлы</a> будут заменены на графические.</li></ul><p><a href="http://javascript.ru/filter/tips">Подробнее о форматировании</a></p><input name="form_id" id="edit-comment-form" value="comment_form" type="hidden">
<fieldset class="captcha"><legend>CAPTCHA</legend><div class="description">Антиспам</div><div class="form-item">
 <label for="edit-captcha-response">Вопрос: <span class="form-required" title="Это поле необходимо заполнить.">*</span></label>
 <span class="field-prefix">7 + 9 = </span> <input maxlength="2" name="captcha_response" id="edit-captcha-response" size="4" class="form-text required" type="text">
 <div class="description">Введите результат. Например, для 1+3, введите 4.</div>
</div>
<input name="captcha_token" id="edit-captcha-token" value="6ec03e80bd912bea6bcf0d808e05d779" type="hidden">
</fieldset>
<input name="op" id="edit-preview" value="Просмотр" class="button form-submit" type="submit">
<input name="op" id="edit-submit" value="Отправить комментарий" class="button form-submit" type="submit">

</div></form>
</div></div>


</td>

<td><!-- padding -->&nbsp;</td>
<td class="block">
<div id="ajaxCartUpdate"></div>
<table class="tborder tblock" id="block-search-0" width="100%" border="0" cellpadding="4" cellspacing="0">
<thead>
<tr>
	<td class="thead01">
		
		<a style="float: right;" href="#top" onclick="return toggle_collapse('block-search-0')"><img id="collapseimg_block-search-0" src="Izmereniya-okna-dokumenta-elementov_files/collapse_thead.gif" alt="" border="0"></a>
		
		Поиск по сайту
	</td>
</tr>
</thead>

<tbody id="collapseobj_block-search-0" style="">

<tr>
	<td class="alt1"><form action="/search/node" accept-charset="UTF-8" method="post" id="search-block-form">
<div><div class="container-inline"><div class="form-item">
 <input maxlength="128" name="search_block_form_keys" id="edit-search-block-form-keys" size="15" title="Введите слова, которые вы хотите искать." class="form-text" type="text">
</div>
<input name="op" value="Поиск" class="button form-submit" type="submit">
<input name="form_id" id="edit-search-block-form" value="search_block_form" type="hidden">
</div>
</div></form>
</td>
</tr>

</tbody>

</table><table class="tborder tblock" id="block-block-6" width="100%" border="0" cellpadding="4" cellspacing="0">
<thead>
<tr>
	<td class="thead01">
		
		<a style="float: right;" href="#top" onclick="return toggle_collapse('block-block-6')"><img id="collapseimg_block-block-6" src="Izmereniya-okna-dokumenta-elementov_files/collapse_thead.gif" alt="" border="0"></a>
		
		Другие записи этого автора 
	</td>
</tr>
</thead>

<tbody id="collapseobj_block-block-6" style="">

<tr>
	<td class="alt1"><b>Андрей Параничев</b><br><ul id="authored_nodes" class="menu"><li class="leaf"><a href="http://javascript.ru/blog/Andrej-Paranichev/Organizaciya-raboty-s-jQuery">Организация работы с jQuery</a></li><li class="leaf"><a href="http://javascript.ru/blog/Andrej-Paranichev/Osnovy-programmnoj-animacii-JavaScript">Основы программной анимации на JavaScript</a></li><li class="leaf"><a href="http://javascript.ru/blog/Andrej-Paranichev/Vvedenie-sobytiya">Введение в события</a></li></ul></td>
</tr>

</tbody>

</table><table class="tborder tblock" id="block-block-3" width="100%" border="0" cellpadding="4" cellspacing="0">
<thead>
<tr>
	<td class="thead01">
		
		<a style="float: right;" href="#top" onclick="return toggle_collapse('block-block-3')"><img id="collapseimg_block-block-3" src="Izmereniya-okna-dokumenta-elementov_files/collapse_thead.gif" alt="" border="0"></a>
		
		Реклама
	</td>
</tr>
</thead>

<tbody id="collapseobj_block-block-3" style="">

<tr>
	<td class="alt1"><div style="text-align:center"><!--noindex--><a rel="nofollow" href="http://www.jetbrains.com/webstorm/?utm_source=javascript.ru&amp;utm_medium=banner&amp;utm_campaign=webstorm"><img src="Izmereniya-okna-dokumenta-elementov_files/webstorm.png" width="200" height="170"></a><!--/noindex--></div>


</td>
</tr>

</tbody>

</table><table class="tborder tblock" id="block-block-2" width="100%" border="0" cellpadding="4" cellspacing="0">
<thead>
<tr>
	<td class="thead01">
		
		<a style="float: right;" href="#top" onclick="return toggle_collapse('block-block-2')"><img id="collapseimg_block-block-2" src="Izmereniya-okna-dokumenta-elementov_files/collapse_thead.gif" alt="" border="0"></a>
		
		Содержание
	</td>
</tr>
</thead>

<tbody id="collapseobj_block-block-2" style="">

<tr>
	<td class="alt1">
<div style="padding-left: 10px">

<h2 id="guru-js" class="chapter-header">Учебник javascript</h2>


<ul class="book-tree book-tree-short book-tree-top" style="margin-bottom:0"><li class="leaf book-tree-3930"><a href="http://javascript.ru/tutorial/intro" class="book-tree-link-1">Введение</a></li><li class="collapsed book-tree-4125"><a href="http://javascript.ru/tutorial/foundation" class="book-tree-link-1">Основы javascript</a></li><li class="collapsed book-tree-605"><a href="http://javascript.ru/tutorial/dom" class="book-tree-link-1">DOM: работа с HTML-страницей</a></li><li class="collapsed book-tree-445"><a href="http://javascript.ru/tutorial/events" class="book-tree-link-1">События</a></li><li class="collapsed book-tree-443"><a href="http://javascript.ru/tutorial/object" class="book-tree-link-1">Объекты, ООП</a></li><li class="leaf book-tree-453"><a href="http://javascript.ru/tutorial/ajax" class="book-tree-link-1">AJAX</a></li><li class="leaf book-tree-6202"><a href="http://javascript.ru/tutorial/regexp-specials" class="book-tree-link-1">Особенности регулярных выражений в Javascript</a></li></ul>

<h2 id="language" class="chapter-header">Основные элементы языка</h2>

<ul class="book-tree book-tree-short book-tree-top"><li class="leaf book-tree-107"><a href="http://javascript.ru/basic/types" class="book-tree-link-1">Базовые типы: Строки, Числа, Boolean</a></li><li class="leaf book-tree-112"><a href="http://javascript.ru/basic/operators" class="book-tree-link-1">Операторы, их особенности в JS</a></li><li class="leaf book-tree-110"><a href="http://javascript.ru/basic/array" class="book-tree-link-1">Массивы </a></li><li class="leaf book-tree-121"><a href="http://javascript.ru/basic/functions" class="book-tree-link-1">Функции</a></li><li class="leaf book-tree-680"><a href="http://javascript.ru/basic/closure" class="book-tree-link-1">Замыкания </a></li><li class="leaf book-tree-105"><a href="http://javascript.ru/basic/regular-expression" class="book-tree-link-1">Регулярные выражения</a></li><li class="leaf book-tree-113"><a href="http://javascript.ru/basic/syntax-switch-for" class="book-tree-link-1">Конструкции языка. Обработка ошибок.</a></li></ul>
<h2 id="tools" class="chapter-header">Сундучок с инструментами</h2>

<ul class="book-tree book-tree-short book-tree-top"><li class="collapsed book-tree-596"><a href="http://javascript.ru/tools/development" class="book-tree-link-1">Редактирование и отладка скриптов</a></li><li class="collapsed book-tree-434"><a href="http://javascript.ru/tools/cookie" class="book-tree-link-1">Cookie</a></li><li class="collapsed book-tree-437"><a href="http://javascript.ru/tools/http-debug" class="book-tree-link-1">HTTP-Отладка</a></li><li class="collapsed book-tree-436"><a href="http://javascript.ru/tools/html-source" class="book-tree-link-1">Просмотр живого HTML</a></li><li class="collapsed book-tree-454"><a href="http://javascript.ru/tools/plugin" class="book-tree-link-1">Разное полезное</a></li></ul>

<h2 id="ui" class="chapter-header">Интерфейсы</h2>

<ul class="book-tree book-tree-short book-tree-top"><li class="leaf book-tree-1593"><a href="http://javascript.ru/ui/draganddrop" class="book-tree-link-1">Drag and drop</a></li><li class="leaf book-tree-708"><a href="http://javascript.ru/ui/tree" class="book-tree-link-1">Грамотное javascript-дерево за 7 шагов</a></li><li class="leaf book-tree-1418"><a href="http://javascript.ru/ui/ajax" class="book-tree-link-1">Интеграция AJAX в интерфейс</a></li><li class="leaf book-tree-1676"><a href="http://javascript.ru/ui/offset" class="book-tree-link-1">Координаты элемента на странице</a></li><li class="leaf book-tree-6174"><a href="http://javascript.ru/ui/show-hide-toggle" class="book-tree-link-1">Правильные show/hide/toggle</a></li><li class="leaf book-tree-1419"><a href="http://javascript.ru/ui/ajaxtree" class="book-tree-link-1">Удобное дерево с AJAX-подгрузкой</a></li></ul>

<h2 id="ajax" class="chapter-header">Все об AJAX</h2>

<ul class="book-tree book-tree-short book-tree-top"><li class="leaf book-tree-69"><a href="http://javascript.ru/ajax/intro" class="book-tree-link-1">Введение в Ajax</a></li><li class="leaf book-tree-71"><a href="http://javascript.ru/ajax/rich-client" class="book-tree-link-1">Ajax и Rich Client</a></li><li class="leaf book-tree-72"><a href="http://javascript.ru/ajax/client-server" class="book-tree-link-1">Ajax и клиент-серверная архитектура.</a></li><li class="collapsed book-tree-441"><a href="http://javascript.ru/ajax/transport" class="book-tree-link-1">Способы общения с сервером</a></li><li class="collapsed book-tree-440"><a href="http://javascript.ru/AJAX/COMET" class="book-tree-link-1">COMET</a></li><li class="leaf book-tree-68"><a href="http://javascript.ru/ajax/formats" class="book-tree-link-1">Форматы данных для AJAX</a></li><li class="leaf book-tree-85"><a href="http://javascript.ru/ajax/cross-domain-scripting" class="book-tree-link-1">Обмен данными для документов с разных доменов</a></li><li class="leaf book-tree-5225"><a href="http://javascript.ru/ajax/cross-origin-2" class="book-tree-link-1">Обмен данными между доменами. Часть 2.</a></li></ul>

<h2 id="optimize" class="chapter-header">Оптимизация</h2>

<ul class="book-tree book-tree-short book-tree-top"><li class="collapsed book-tree-5768"><a href="http://javascript.ru/optimize/google-closure-compiler" class="book-tree-link-1">Google Closure Compiler в деталях</a></li><li class="leaf book-tree-400"><a href="http://javascript.ru/optimize/performance-rules" class="book-tree-link-1">Yahoo: лучшие способы ускорения сайта</a></li><li class="leaf book-tree-65"><a href="http://javascript.ru/optimize/yslow" class="book-tree-link-1">Анализ оптимизации страниц c Yslow</a></li><li class="leaf book-tree-723"><a href="http://javascript.ru/optimize/antimvc" class="book-tree-link-1">Интерфейсы. Прочь от MVC</a></li><li class="leaf book-tree-142"><a href="http://javascript.ru/optimize/javascript-performance" class="book-tree-link-1">Оптимизация Javascript-кода</a></li><li class="leaf book-tree-10975"><a href="http://javascript.ru/optimize/documentfragment-0" class="book-tree-link-1">Польза от documentFragment</a></li><li class="leaf book-tree-140"><a href="http://javascript.ru/optimize/javascript-compression" class="book-tree-link-1">Сжатие Javascript и CSS</a></li><li class="leaf book-tree-778"><a href="http://javascript.ru/optimize/better-compression" class="book-tree-link-1">Улучшаем сжимаемость Javascript-кода. </a></li><li class="leaf book-tree-710"><a href="http://javascript.ru/optimize/cache-versioning" class="book-tree-link-1">Умное Кеширование и Версионность в Javascript/CSS</a></li></ul>
<h2 id="misc" class="chapter-header">Разное</h2>
<ul class="book-tree book-tree-short book-tree-top"><li class="collapsed book-tree-449"><a href="http://javascript.ru/unsorted/async" class="book-tree-link-1">Асинхронное программирование</a></li><li class="leaf book-tree-4908"><a href="http://javascript.ru/unsorted/google-gears" class="book-tree-link-1">Google Gears в деталях</a></li><li class="leaf book-tree-707"><a href="http://javascript.ru/unsorted/bridge-to-flash" class="book-tree-link-1">Javascript &lt;-&gt; Flash мост</a></li><li class="leaf book-tree-896"><a href="http://javascript.ru/unsorted/bookmarklet" class="book-tree-link-1">Букмарклеты и правила их написания</a></li><li class="leaf book-tree-151"><a href="http://javascript.ru/unsorted/book-choice" class="book-tree-link-1">О подборке книг на сайте</a></li><li class="leaf book-tree-807"><a href="http://javascript.ru/unsorted/why_href_js_is_bad" class="book-tree-link-1">Почему &lt;a href="javascript:..."&gt; - плохо</a></li><li class="leaf book-tree-10695"><a href="http://javascript.ru/unsorted/id" class="book-tree-link-1">Способы идентификации в интернете</a></li><li class="leaf book-tree-4176"><a href="http://javascript.ru/unsorted/w3c" class="book-tree-link-1">Уровни DOM</a></li><li class="leaf book-tree-717"><a href="http://javascript.ru/unsorted/read" class="book-tree-link-1">Что почитать?</a></li><li class="leaf book-tree-798"><a href="http://javascript.ru/unsorted/templating" class="book-tree-link-1">Шаблонизация с javascript</a></li><li class="leaf book-tree-809"><a href="http://javascript.ru/unsorted/selenium-rc++" class="book-tree-link-1">Юнит-тесты уровня браузера на связке Selenium + PHP.</a></li><li class="leaf book-tree-394"><a href="http://javascript.ru/unsorted/html-css-manual" class="book-tree-link-1">Справочники: Javascript/HTML/CSS</a></li><li class="leaf book-tree-5783"><a href="http://javascript.ru/unsorted/google-closure-library-build" class="book-tree-link-1">Система сборки и зависимостей Google Closure Library</a></li><li class="leaf book-tree-683"><a href="http://javascript.ru/unsorted/storage" class="book-tree-link-1">Хранение данных на клиенте. DOM Storage и его аналоги.</a></li><li class="leaf book-tree-1016"><a href="http://javascript.ru/unsorted/top-10-functions" class="book-tree-link-1">10 лучших функций на JavaScript</a></li></ul>
<p style="text-align:right;margin-bottom:0"><a href="http://javascript.ru/doctree">Дерево всех статей</a></p>
</div>

</td>
</tr>

</tbody>

</table><table class="tborder tblock" id="block-views-Tags" width="100%" border="0" cellpadding="4" cellspacing="0">
<thead>
<tr>
	<td class="thead01">
		
		<a style="float: right;" href="#top" onclick="return toggle_collapse('block-views-Tags')"><img id="collapseimg_block-views-Tags" src="Izmereniya-okna-dokumenta-elementov_files/collapse_thead.gif" alt="" border="0"></a>
		
		Популярные таги
	</td>
</tr>
</thead>

<tbody id="collapseobj_block-views-Tags" style="">

<tr>
	<td class="alt1"><div class="view view-Tags"><div class="view-content view-content-Tags"><a href="http://javascript.ru/tags/vysokoproizvoditelnaya-arkhitektura" class="tagadelic level1" rel="tag">Высокопроизводительная архитектура</a> 
<a href="http://javascript.ru/tags/zametki-programmista" class="tagadelic level1" rel="tag">Заметки программиста</a> 
<a href="http://javascript.ru/tags/raznoe" class="tagadelic level4" rel="tag">Разное</a> 
<a href="http://javascript.ru/tags/veb-obzory" class="tagadelic level3" rel="tag">веб-обзоры</a> 
<a href="http://javascript.ru/taxonomy/term/8" class="tagadelic level2" rel="tag">плагин</a> 
<a href="http://javascript.ru/tags/freimvork" class="tagadelic level1" rel="tag">фреймворк</a> 
<a href="http://javascript.ru/tags/ajax" class="tagadelic level6" rel="tag">Ajax</a> 
<a href="http://javascript.ru/tags/dojo-toolkit" class="tagadelic level1" rel="tag">Dojo Toolkit</a> 
<a href="http://javascript.ru/tags/ext" class="tagadelic level2" rel="tag">Ext</a> 
<a href="http://javascript.ru/tags/extjs" class="tagadelic level3" rel="tag">ExtJS</a> 
<a href="http://javascript.ru/tags/extjs-framework" class="tagadelic level2" rel="tag">ExtJS Framework</a> 
<a href="http://javascript.ru/tags/firefox" class="tagadelic level1" rel="tag">firefox</a> 
<a href="http://javascript.ru/tags/flash" class="tagadelic level1" rel="tag">flash</a> 
<a href="http://javascript.ru/tags/javascript" class="tagadelic level6" rel="tag">javascript</a> 
<a href="http://javascript.ru/tags/jquery" class="tagadelic level6" rel="tag">jQuery</a> 
<a href="http://javascript.ru/tags/jquery-ui" class="tagadelic level1" rel="tag">jQuery UI</a> 
<a href="http://javascript.ru/tags/Node.JS" class="tagadelic level1" rel="tag">Node.JS</a> 
<a href="http://javascript.ru/tags/open-source" class="tagadelic level4" rel="tag">open source</a> 
<a href="http://javascript.ru/tags/php" class="tagadelic level2" rel="tag">PHP</a> 
<a href="http://javascript.ru/tags/web20" class="tagadelic level3" rel="tag">web2.0</a> 
</div><div class="more-link"><a href="http://javascript.ru/tags">еще</a></div></div>
</td>
</tr>

</tbody>

</table><table class="tborder tblock" id="block-vbforumblocks-1" width="100%" border="0" cellpadding="4" cellspacing="0">
<thead>
<tr>
	<td class="thead01">
		
		<a style="float: right;" href="#top" onclick="return toggle_collapse('block-vbforumblocks-1')"><img id="collapseimg_block-vbforumblocks-1" src="Izmereniya-okna-dokumenta-elementov_files/collapse_thead.gif" alt="" border="0"></a>
		
		Последние обсуждения на форуме
	</td>
</tr>
</thead>

<tbody id="collapseobj_block-vbforumblocks-1" style="">

<tr>
	<td class="alt1"><div class="item-list"><ul><li><a href="http://javascript.ru/forum/showthread.php?t=26042&amp;goto=newpost" title="Здраствуйте, подскажите пожалуйста, как сделать скрипт, находящий все элементы с классом 'body' и заменяющего его на класс 'pBody'?" rel="nofollow">Изменить класс</a>
</li><li><a href="http://javascript.ru/forum/showthread.php?t=26014&amp;goto=newpost" title="http://shamansir.github.com/JavaScript-Garden/#types.typeof

я вообще не понял либо авторы тупят либо я, Тайпоф не возвращает класс или тип обьекта. Он возвращает то, к какому из нативнйх типов данных принадлежит операнд:

string undefined function number object boolean

авторы этого не знают? О_О Или они просто считают это неправильным? 

Но по моему это правильно! Класс обьекта нужно определять по другому! Тут просто определяется тип данных." rel="nofollow">Непонятки с оператором typeof</a>
</li><li><a href="http://javascript.ru/forum/showthread.php?t=25972&amp;goto=newpost" title="Добрый день!
есть код следущего вида
for (var i = 0; i &amp;lt; count_day; i++) {
	if ($(&amp;quot;.ui-datepicker-calendar td&amp;quot;) != undefined) {
		if ($(&amp;quot;.ui-datepicker-calendar td&amp;quot;).className == &amp;quot; calendar_event&amp;quot;) {
			if (parseInt($(&amp;quot;.ui-datepicker-calendar td&amp;quot;).getElementsByTagName('a').innerHTML) &amp;lt; 10) {
				var dd = &amp;quot;0&amp;quot;+$(&amp;quot;.ui-datepicker-calendar td&amp;quot;).getElementsByTagName('a').innerHTML.toString();
			} else {
				var dd = $(&amp;quot;.ui-datepicker-calendar td&amp;quot;).getElementsByTagName('a').innerHTML;
			}
			$.post(&amp;quot;/ch/check_events.php&amp;quot;, {d: '2012-' + mon_num + '-' + dd + ' 00:00:00'}, function(s){
				if (s == 1) {$(&amp;quot;.ui-datepicker-calendar td&amp;quot;).className = &amp;quot;calendar_event&amp;quot;;}
				else {$(&amp;quot;.ui-datepicker-calendar td&amp;quot;).className = &amp;quot;&amp;quot;;}
			console.log(i);
			});
		}
	}
}
у меня постоянно пост запрос возвращает последнее значение. спросил у коллеги, сказал надо делать замыкание, но КАК не сказал?
может Вы подскажите как мне сделать замыкание? или как решить данную проблему" rel="nofollow">замыкание в пост запросе</a>
</li><li><a href="http://javascript.ru/forum/showthread.php?t=26045&amp;goto=newpost" title="Как узнать тип элемента (a, div, span, input, textarea и т.д.), зная его id?" rel="nofollow">Тип элемента по ид</a>
</li><li><a href="http://javascript.ru/forum/showthread.php?t=25915&amp;goto=newpost" title="как перечислить и изменить Event Listnerы на элементе?" rel="nofollow">перечислить и изменить Event Listnerы на элементе</a>
</li><li><a href="http://javascript.ru/forum/showthread.php?t=5437&amp;goto=newpost" title="Возможно ли средствами js проверить существование файла по пути (www.mysite.com/files/file1.zip)? Либо проверить такую ссылку на 403 или 404?" rel="nofollow">Проверка существования файла</a>
</li><li><a href="http://javascript.ru/forum/showthread.php?t=26048&amp;goto=newpost" title="добрый день!столкнулся с проблемой с этим редактором.Есть задача вставлять по нажатию на ссылку  текст этой ссылки в любое место редактора,т.е. мы пишем текст.потом жмем на ссылку и текст добавляется на место курсора.Спасибо." rel="nofollow">Вставка текста в cleditor</a>
</li></ul></div><a style="display: block; text-align: right;" href="http://javascript.ru/forum/">Forum</a></td>
</tr>

</tbody>

</table><table class="tborder tblock" id="block-block-16" width="100%" border="0" cellpadding="4" cellspacing="0">
<thead>
<tr>
	<td class="thead01">
		
		<a style="float: right;" href="#top" onclick="return toggle_collapse('block-block-16')"><img id="collapseimg_block-block-16" src="Izmereniya-okna-dokumenta-elementov_files/collapse_thead.gif" alt="" border="0"></a>
		
		Последние комментарии
	</td>
</tr>
</thead>

<tbody id="collapseobj_block-block-16" style="">

<tr>
	<td class="alt1"><div class="view view-comments-recent"><div class="view-content view-content-comments-recent"><div class="item-list"><ul><li><div class="view-item view-item-comments-recent"><div class="view-field view-data-comments-subject"><a href="http://javascript.ru/courses#comment-15097">Объясните пжлс что означает эта фраза:</a></div><div class="view-label view-label-comments-name">  от&nbsp;</div><div class="view-field view-data-comments-name">Гошка (не зарегистрирован)</div><div class="view-field view-data-comments-timestamp"><em>2 часа 45 минут</em> назад</div></div>
</li><li><div class="view-item view-item-comments-recent"><div class="view-field view-data-comments-subject"><a href="http://javascript.ru/ecma/part4#comment-15096">Обычная документация, тем более это...</a></div><div class="view-label view-label-comments-name">  от&nbsp;</div><div class="view-field view-data-comments-name">гость (не зарегистрирован)</div><div class="view-field view-data-comments-timestamp"><em>7 часов 18 минут</em> назад</div></div>
</li><li><div class="view-item view-item-comments-recent"><div class="view-field view-data-comments-subject"><a href="http://javascript.ru/php/strlen#comment-15094">Не удержался.</a></div><div class="view-label view-label-comments-name">  от&nbsp;</div><div class="view-field view-data-comments-name">Mitrich (не зарегистрирован)</div><div class="view-field view-data-comments-timestamp"><em>13 часов 33 минуты</em> назад</div></div>
</li><li><div class="view-item view-item-comments-recent"><div class="view-field view-data-comments-subject"><a href="http://javascript.ru/Math.random#comment-15093">Math.Random(0,56); - случайное число от...</a></div><div class="view-label view-label-comments-name">  от&nbsp;</div><div class="view-field view-data-comments-name">Лев (не зарегистрирован)</div><div class="view-field view-data-comments-timestamp"><em>16 часов 27 минут</em> назад</div></div>
</li><li><div class="view-item view-item-comments-recent"><div class="view-field view-data-comments-subject"><a href="http://javascript.ru/window.close#comment-15090">Для доступа к свойствам текущего окна...</a></div><div class="view-label view-label-comments-name">  от&nbsp;</div><div class="view-field view-data-comments-name">Гость (не зарегистрирован)</div><div class="view-field view-data-comments-timestamp"><em>17 часов 51 минута</em> назад</div></div>
</li></ul></div></div></div>
</td>
</tr>

</tbody>

</table>
<script>
var ACUholder = document.getElementById('ajaxCartUpdateHolder')
var ACU = document.getElementById('ajaxCartUpdate')
if (ACU) ACUholder.parentNode.removeChild(ACUholder) 
else ACUholder.setAttribute('id', 'ajaxCartUpdate')
</script>
</td>

</tr>
</tbody></table>





<br>

	</td>
</tr>
</tbody></table>
<!-- / close content container -->
<!-- /content area table -->
</td></tr>
</tbody></table><!-- / content table --></td>
</tr>
<tr>

	<td class="footer-row"><table class="page" width="100%" align="center" border="0" cellpadding="4" cellspacing="0">
<tbody><tr>
	
	<td class="tfoot" width="100%" align="right">

		<div class="smallfont" style="height:31px;line-height:31px;text-align:center">


		

			<strong>
<span style="padding-right: 20px;">© Илья Кантор, 2007-2011</span> 

<a href="http://javascript.ru/about-project" rel="nofollow">О проекте</a> -

				<a href="http://javascript.ru/contact" rel="nofollow">Обратная связь</a> -
				
				


				
				<a href="#top" onclick="self.scrollTo(0, 0); return false;">Вверх</a>
			</strong>

		</div>
	</td>
</tr>
<tr>
<td style="text-align: center; color: gray; font-size: 12px;">


<!--975080655384--><!--339ad47d--><!--339ad47d-->  
</td>
</tr>
</tbody></table><!-- / footer table --></td>
</tr>
</tbody></table><!-- / main table -->




<script type="text/javascript" src="Izmereniya-okna-dokumenta-elementov_files/scripts.js"></script>


<script type="text/javascript">vBulletin_init()</script>


</div>

<div style="display:none">



<!-- Yandex.Metrika counter -->
<div style="display:none;"><script type="text/javascript">
(function(w, c) {
    (w[c] = w[c] || []).push(function() {
        try {
            w.yaCounter1178660 = new Ya.Metrika(1178660);
             yaCounter1178660.trackLinks(true);
        
        } catch(e) { }
    });
})(window, 'yandex_metrika_callbacks');
</script></div>
<script src="Izmereniya-okna-dokumenta-elementov_files/watch.js" type="text/javascript" defer="defer"></script>
<noscript><div><img src="//mc.yandex.ru/watch/1178660" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->

 <!-- #wrapper -->

</div><table style="position: absolute; display: none;" class="editor-popup" id="editor-dialog"><tbody><tr class="head even"><td class="title"></td><td class="close"><a>x</a></td></tr><tr class="body odd"><td colspan="2" class="content"></td></tr></tbody></table></body></html>